Why simple website project with php and mysql?
In this mini project you will learn how to connect your database (mysql) with php, setup an html template, make header, footer, dynamic sidebar, fetch title, content, meta tags, meta description for dynamic web pages (individual pages). You can manage these web pages form the manage site area which is like the admin section of the website. You will also learn how to integrate facebook fan page, google badge plugin, and twitter follow button in the sidebar.
Folder and files used in this project
Take a look at the folder and files structure used in this project.
- Manage Site – This is like an admin folder which contains files to create and view all the dynamic web pages of the website.
- Cleditor – A light weight javascript library for UI text editor.
- js – Admin area javascript files
- home.php – Home page for the admin area
- header.php – The header part of the admin
- footer.php – The footer part of the admin
- manage_pages.php – Manage all the pages that are created or to be created. delete pages from this section
- add_edit_page.php – Add or edit a page here
- tagline.php – Update website tagline here
- libs – It contain configuration files, common functions and database connection script
- common_functions.php – Commonly used function for the websites and admin area.
- constants.php – Define constatant like table names, databasebe user access, site name
- config.php – Database connection script.
- js – It contains javascript files for the website.
- images – Images for the website.
- css – The stylesheet files for the website.
- index.php – The home page of the website.
- header.php – Dynamic header of the website.
- footer.php – Dynamic footer of the website.
- sidebar.php – Dynamic right sidebar of the website.
- about-us.php – About us page.
- contact-us.php – Contact us page with form.
- category.php – Category page with sub pages.
- page.php – A dynamic page that will load page content based on id.
Take a look at the pages composition code:
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
/* Basic */ *,*:before,*:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-o-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box} body { font-size: 13.5pt; font-family: sans-serif; background-color: #e3e9dc; font-family: 'Ubuntu Condensed', sans-serif; color: #878e83; letter-spacing: -1px; } h1,h2,h3,h4 { color: #007897; font-weight: normal; } h1,h2 { text-transform: lowercase; } h2 { font-size: 1.6em; letter-spacing: -1px; margin-bottom: 0.5em; text-transform:lowercase; } h3,h4 { color: #283121; margin-bottom: 0.5em; } h3 { font-size: 1.2em; margin-bottom: 0.8em; } h4 { font-size: 1em; } p, ul { margin-bottom: 1.25em; } p { line-height: 25px; } strong { color: #474e43; } img.left { float: left; margin: 2px 1.25em 0 0; } img.top { margin: 4px 0 2.25em 0; } ul { padding: 0.25em 0 0 0; } a { color: #5d93a2; text-decoration: underline; } a:hover { text-decoration: none; } * > p:last-child { margin-bottom: 0 !important; } /* Reusable */ article.blog-post { position: relative; } article.blog-post .comments { position: absolute; top: 0; right: 0; height: 32px; line-height: 24px; padding-left: 40px; background: url('images/icon-bubble.png') no-repeat; } ul.small-image-list { } ul.small-image-list li { overflow: hidden; margin-bottom: 1.5em; } ul.big-image-list { } ul.big-image-list li { overflow: hidden; margin-bottom: 2em; } ul.link-list { } ul.link-list li { border-top: solid 1px #ced0b7; padding: 0.75em 0 0 0; margin: 0.75em 0 0 0; } ul.link-list li:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .button { display: inline-block; padding: 15px 25px 15px 25px; background-color: #007b9d; background-image: -moz-linear-gradient(top, #008dad, #007b9d); background-image: -webkit-linear-gradient(top, #008dad, #007b9d); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dad), to(#007b9d)); background-image: -ms-linear-gradient(top, #008dad, #007b9d); background-image: -o-linear-gradient(top, #008dad, #007b9d); background-image: linear-gradient(top, #008dad, #007b9d); border-radius: 10px; text-transform: lowercase; text-decoration: none; color: #fff; font-size: 1.2em; letter-spacing: -1px; border: solid 1px #006e8b; box-shadow: inset 0px 0px 0px 1px #18a8c8; } .button:hover { background-color: #118eb1; background-image: -moz-linear-gradient(top, #1b9fbe, #118eb1); background-image: -webkit-linear-gradient(top, #1b9fbe, #118eb1); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b9fbe), to(#118eb1)); background-image: -ms-linear-gradient(top, #1b9fbe, #118eb1); background-image: -o-linear-gradient(top, #1b9fbe, #118eb1); background-image: linear-gradient(top, #1b9fbe, #118eb1); box-shadow: inset 0px 0px 0px 1px #3ecceb; } |
style-mobile.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 |
/* Basic */ body { font-size: 13pt; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } h4 { font-size: 1em; } p { line-height: 25px; } .left-content { line-height: 25px; } /* Reusable */ ul.small-image-list img { width: 75px; } ul.big-image-list img { width: 75px; } ul.link-list { margin: 0 0 2em 0; } section, article { padding: 40px 20px 40px 20px; } #main section, #main article { background: #fff; } article.blog-post .comments { display: block; position: relative; top: -0.5em; margin: 0 0 0.5em 0; } article.blog-post h2 { } .button { font-size: 1em; } .blog-post-image { width: 100%; } /* Header */ #header-wrapper { background-color: #007294; background-image: -moz-linear-gradient(top, #008dab, #007294); background-image: -webkit-linear-gradient(top, #008dab, #007294); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294)); background-image: -ms-linear-gradient(top, #008dab, #007294); background-image: -o-linear-gradient(top, #008dab, #007294); background-image: linear-gradient(top, #008dab, #007294); } #header { display: none; } /* Banner */ #banner-wrapper { background: #c8d2bc url(images/bg1.png); display: none; } #banner { position: relative; width: 100%; height: 240px; background: #fff url(images/banner.jpg) no-repeat; background-size: 100% 100%; } #banner { position: relative; } #banner h2 { position: absolute; z-index: 1; width: 100%; bottom: 80px; left: 0; font-size: 2em; color: #fff; text-align: center; letter-spacing: -2px; } #banner span { display: block; position: absolute; z-index: 1; width: 100%; top: 135px; left: 0; font-size: 1em; color: #fff; text-align: center; letter-spacing: -1px; text-transform: lowercase; opacity: 0.8; } /* Main */ #main { margin-top: 14px; } /* Footer */ #footer-wrapper section, #footer-wrapper article { border-bottom: solid 1px #ced0b7; } /* Copyright */ #copyright { text-align: center; color: #A6A88F; padding: 40px; font-size: 0.8em; line-height: 1.5em; } #copyright a { color: #A6A88F; } /* Mobile UI */ #titleBar { text-align: center; color: #fff; font-size: 1.25em; background-color: #007294; background-image: -moz-linear-gradient(top, #008dab, #007294); background-image: -webkit-linear-gradient(top, #008dab, #007294); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294)); background-image: -ms-linear-gradient(top, #008dab, #007294); background-image: -o-linear-gradient(top, #008dab, #007294); background-image: linear-gradient(top, #008dab, #007294); } #titleBar .title { line-height: 44px; } #titleBar .toggle { position: absolute; top: 0; left: 0; width: 80px; height: 60px; } #titleBar .toggle:after { content: ''; position: absolute; left: 4px; top: 4px; color: #fff; text-align: center; line-height: 31px; font-size: 0.8em; width: 50px; height: 35px; border-radius: 5px; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.25), inset 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 6px 13px 0px rgba(255,255,255,0.2), 0px 2px 2px 0px rgba(255,255,255,0.1); } #titleBar .toggle:before { content: ''; position: absolute; width: 20px; height: 30px; background: url('images/mobileUI-site-nav-opener-bg.svg'); top: 16px; left: 19px; } #titleBar .toggle:active:after { background: rgba(0,0,0,0.2); } #navPanel { background: #00536F; color: #fff; box-shadow: inset -10px 0px 40px 0px rgba(0,0,0,0.5); } #navPanel .link { display: block; color: #fff; border-top: solid 1px rgba(255,255,255,0.1); border-bottom: solid 1px rgba(0,0,0,0.2); height: 55px; line-height: 55px; padding: 0 15px 0 15px; text-decoration: none; } #navPanel .link:first-child { border-top: 0; } #navPanel .link:last-child { border-bottom: 0; } |
style-mobile.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 |
/* Basic */ body { font-size: 13pt; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } h4 { font-size: 1em; } p { line-height: 25px; } .left-content { line-height: 25px; } /* Reusable */ ul.small-image-list img { width: 75px; } ul.big-image-list img { width: 75px; } ul.link-list { margin: 0 0 2em 0; } section, article { padding: 40px 20px 40px 20px; } #main section, #main article { background: #fff; } article.blog-post .comments { display: block; position: relative; top: -0.5em; margin: 0 0 0.5em 0; } article.blog-post h2 { } .button { font-size: 1em; } .blog-post-image { width: 100%; } /* Header */ #header-wrapper { background-color: #007294; background-image: -moz-linear-gradient(top, #008dab, #007294); background-image: -webkit-linear-gradient(top, #008dab, #007294); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294)); background-image: -ms-linear-gradient(top, #008dab, #007294); background-image: -o-linear-gradient(top, #008dab, #007294); background-image: linear-gradient(top, #008dab, #007294); } #header { display: none; } /* Banner */ #banner-wrapper { background: #c8d2bc url(images/bg1.png); display: none; } #banner { position: relative; width: 100%; height: 240px; background: #fff url(images/banner.jpg) no-repeat; background-size: 100% 100%; } #banner { position: relative; } #banner h2 { position: absolute; z-index: 1; width: 100%; bottom: 80px; left: 0; font-size: 2em; color: #fff; text-align: center; letter-spacing: -2px; } #banner span { display: block; position: absolute; z-index: 1; width: 100%; top: 135px; left: 0; font-size: 1em; color: #fff; text-align: center; letter-spacing: -1px; text-transform: lowercase; opacity: 0.8; } /* Main */ #main { margin-top: 14px; } /* Footer */ #footer-wrapper section, #footer-wrapper article { border-bottom: solid 1px #ced0b7; } /* Copyright */ #copyright { text-align: center; color: #A6A88F; padding: 40px; font-size: 0.8em; line-height: 1.5em; } #copyright a { color: #A6A88F; } /* Mobile UI */ #titleBar { text-align: center; color: #fff; font-size: 1.25em; background-color: #007294; background-image: -moz-linear-gradient(top, #008dab, #007294); background-image: -webkit-linear-gradient(top, #008dab, #007294); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294)); background-image: -ms-linear-gradient(top, #008dab, #007294); background-image: -o-linear-gradient(top, #008dab, #007294); background-image: linear-gradient(top, #008dab, #007294); } #titleBar .title { line-height: 44px; } #titleBar .toggle { position: absolute; top: 0; left: 0; width: 80px; height: 60px; } #titleBar .toggle:after { content: ''; position: absolute; left: 4px; top: 4px; color: #fff; text-align: center; line-height: 31px; font-size: 0.8em; width: 50px; height: 35px; border-radius: 5px; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.25), inset 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 6px 13px 0px rgba(255,255,255,0.2), 0px 2px 2px 0px rgba(255,255,255,0.1); } #titleBar .toggle:before { content: ''; position: absolute; width: 20px; height: 30px; background: url('images/mobileUI-site-nav-opener-bg.svg'); top: 16px; left: 19px; } #titleBar .toggle:active:after { background: rgba(0,0,0,0.2); } #navPanel { background: #00536F; color: #fff; box-shadow: inset -10px 0px 40px 0px rgba(0,0,0,0.5); } #navPanel .link { display: block; color: #fff; border-top: solid 1px rgba(255,255,255,0.1); border-bottom: solid 1px rgba(0,0,0,0.2); height: 55px; line-height: 55px; padding: 0 15px 0 15px; text-decoration: none; } #navPanel .link:first-child { border-top: 0; } #navPanel .link:last-child { border-bottom: 0; } |
style-desktop.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
/* Basic */ body { min-width: 1200px; } section, article { margin: 0 0 20px 0; } section:last-child, article:last-child { margin-bottom: 0; } section.left-content { padding-right: 30px; line-height:25px; } section.right-content { padding-left: 30px; } section.middle-content { padding: 0 30px 0 30px; } ul.small-image-list img { width: 78px; } ul.big-image-list img { width: 178px; } /* Reusable */ .blog-post-image { width: 588px; } /* Header */ #header-wrapper { background-color: #007294; background-image: -moz-linear-gradient(top, #008dab, #007294); background-image: -webkit-linear-gradient(top, #008dab, #007294); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294)); background-image: -ms-linear-gradient(top, #008dab, #007294); background-image: -o-linear-gradient(top, #008dab, #007294); background-image: linear-gradient(top, #008dab, #007294); } #header { position: relative; margin: 2.5% 0 2.5% 0; padding: 0 40px 0 40px; border-radius: 10px; border: solid 1px #006e8b; box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10); background-color: #007b9d; background-image: -moz-linear-gradient(top, #008ead, #007b9d); background-image: -webkit-linear-gradient(top, #008ead, #007b9d); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d)); background-image: -ms-linear-gradient(top, #008ead, #007b9d); background-image: -o-linear-gradient(top, #008ead, #007b9d); background-image: linear-gradient(top, #008ead, #007b9d); height: 86px; } #header h1 { position: absolute; left: 40px; top: 0; color: #fff; font-size: 2.4em; letter-spacing: -2px; line-height: 86px; } #header h1 a { color: #fff; text-decoration: none; } #header nav { position: absolute; right: 40px; top: 1px; line-height: 84px; text-transform: lowercase; font-size: 1.3em; letter-spacing: -1px; } #header nav a { display: inline-block; text-decoration: none; color: #fff; padding: 0 25px 0 25px; outline: 0; } #header nav a.current-page-item { background-color: #007897; background-image: -moz-linear-gradient(top, #007b99, #007897); background-image: -webkit-linear-gradient(top, #007b99, #007897); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897)); background-image: -ms-linear-gradient(top, #007b99, #007897); background-image: -o-linear-gradient(top, #007b99, #007897); background-image: linear-gradient(top, #007b99, #007897); box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1); } #header nav a:hover { background-color: #0882a1; background-image: -moz-linear-gradient(top, #0782a0, #077d9b); background-image: -webkit-linear-gradient(top, #0782a0, #077d9b); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b)); background-image: -ms-linear-gradient(top, #0782a0, #077d9b); background-image: -o-linear-gradient(top, #0782a0, #077d9b); background-image: linear-gradient(top, #0782a0, #077d9b); box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05); } /* Banner */ #banner-wrapper { background: #c8d2bc url(images/bg1.png); } #banner { position: relative; width: 1160px; height: 265px; margin: 2% 0 2% 0; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.10); border-radius: 10px; padding: 20px; background: #fff url(images/banner.jpg) no-repeat 20px 20px; background-size: 1160px 265px; } #banner h2 { position: absolute; z-index: 1; width: 100%; top: 100px; left: 0; font-size: 3.3em; color: #fff; text-align: center; letter-spacing: -2px; } #banner span { display: block; position: absolute; z-index: 1; width: 100%; bottom: 105px; left: 0; font-size: 1.6em; color: #fff; text-align: center; letter-spacing: -1px; text-transform: lowercase; opacity: 0.8; } /* Main */ #main { background: #fff; padding: 2% 0 2% 0; } #main .controls { } /* Footer */ #footer-wrapper { padding: 0 0 1% 0; } /* Copyright */ #copyright { text-align: center; color: #A6A88F; padding: 1em 0 0 0; margin: 1% 0 0 0; } #copyright a { color: #A6A88F; } |
style-1000px.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
/* Basic */ body { min-width: 960px; } /* Reusable */ ul.small-image-list img { width: 50px; } ul.big-image-list img { width: 75px; } /* Header */ #header { height: 76px; } #header h1 { font-size: 2em; line-height: 76px; } #header nav { line-height: 74px; font-size: 1.1em; } #header nav a { padding: 0 20px 0 20px; } /* Banner */ #banner { width: 960px; height: 220px; background-size: 960px 220px; } #banner h2 { font-size: 3em; top: 80px; } #banner span { font-size: 1.4em; bottom: 85px; } /* Footer */ #footer-wrapper { padding: 5% 0 5% 0; } /* Copyright */ #copyright { padding: 3em 0 0 0; margin: 5% 0 0 0; } |
ie9.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* Minimaxing 3.1 by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ .button { background-image: url('images/button.svg'); } .button:hover { background-image: url('images/button-hover.svg'); } #header-wrapper { background-image: url('images/header-wrapper.svg'); } #header { background-image: url('images/header.svg'); } #header nav a.current-page-item { background-image: url('images/nav-a.svg'); } #header nav a:hover { background-image: url('images/nav-a-hover.svg'); } |
skel-noscript.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} /* Box Model */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* Container */ body { min-width: 1200px; } .container { width: 1200px; margin-left: auto; margin-right: auto; } /* Modifiers */ .container.small { width: 900px; } .container.big { width: 100%; max-width: 1500px; min-width: 1200px; } /* Grid */ /* Cells */ .\31 2u { width: 100% } .\31 1u { width: 91.6666666667% } .\31 0u { width: 83.3333333333% } .\39 u { width: 75% } .\38 u { width: 66.6666666667% } .\37 u { width: 58.3333333333% } .\36 u { width: 50% } .\35 u { width: 41.6666666667% } .\34 u { width: 33.3333333333% } .\33 u { width: 25% } .\32 u { width: 16.6666666667% } .\31 u { width: 8.3333333333% } .\-11u { margin-left: 91.6666666667% } .\-10u { margin-left: 83.3333333333% } .\-9u { margin-left: 75% } .\-8u { margin-left: 66.6666666667% } .\-7u { margin-left: 58.3333333333% } .\-6u { margin-left: 50% } .\-5u { margin-left: 41.6666666667% } .\-4u { margin-left: 33.3333333333% } .\-3u { margin-left: 25% } .\-2u { margin-left: 16.6666666667% } .\-1u { margin-left: 8.3333333333% } .row > * { padding: 40px 0 0 40px; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row + .row > * { padding-top: 40px; } .row { margin-left: -40px; } /* Rows */ .row:after { content: ''; display: block; clear: both; height: 0; } .row:first-child > * { padding-top: 0; } .row > * { padding-top: 0; } /* Modifiers */ /* Flush */ .row.flush { margin-left: 0; } .row.flush > * { padding: 0 !important; } /* Quarter */ .row.quarter > * { padding: 10px 0 0 10px; } .row.quarter + .row.quarter > * { padding-top: 10px; } .row.quarter { margin-left: -10px; } /* Half */ .row.half > * { padding: 20px 0 0 20px; } .row.half + .row.half > * { padding-top: 20px; } .row.half { margin-left: -20px; } /* One and (a) Half */ .row.oneandhalf > * { padding: 60px 0 0 60px; } .row.oneandhalf + .row.oneandhalf > * { padding-top: 60px; } .row.oneandhalf { margin-left: -60px; } /* Double */ .row.double > * { padding: 80px 0 0 80px; } .row.double + .row.double > * { padding-top: 80px; } .row.double { margin-left: -80px; } |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php /* * @author Ogbugbu Ejiroghene * @website http://www.thesoftwareguy.in * @facebook https://www.facebook.com/owoct * @twitter https://twitter.com/ogbugbu14 */ require("libs/config.php"); $pageDetails = getPageDetailsByName($currentPage); include("header.php"); ?> <div class="row main-row"> <div class="9u"> <section class="left-content"> <h2><?php echo stripslashes($pageDetails["page_title"]); ?></h2> <?php echo stripslashes($pageDetails["page_desc"]); ?> </section> </div> <!--sidebar starts--> <?php include("sidebar.php"); ?> <!--sidebar ends--> </div> <?php include("footer.php"); ?> |
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php /* * @author Ogbugbu Ejiroghene * @website http://www.thesoftwareguy.in * @facebook https://www.facebook.com/owoct * @twitter https://twitter.com/ogbugbu14 */ ?> <!DOCTYPE HTML> <html> <head> <title><?php echo stripslashes($pageDetails["page_title"]); ?> - <?php echo SITE_NAME; ?> - www.thesoftwareguy.in</title> <link rel="icon" href="http://thesoftwareguy.in/favicon.ico" type="image/x-icon" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="<?php echo stripslashes($pageDetails["meta_desc"]); ?>" /> <meta name="keywords" content="<?php echo stripslashes($pageDetails["meta_keywords"]); ?>" /> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'> <script src="js/jquery.min.js"></script> <noscript> <link rel="stylesheet" href="css/skel-noscript.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-desktop.css" /> </noscript> <!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]--> <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]--> </head> <body> <!-- ********************************************************* --> <div id="header-wrapper"> <div class="container"> <div class="row"> <div class="12u"> <header id="header"> <h1><a href="<?php echo getHomeURL(); ?>" id="logo"><?php echo SITE_NAME; ?></a></h1> <nav id="nav"> <a href="about-us.php" <?php echo ($currentPage == "about-us") ? ' class="current-page-item"' : '' ?> >About Us</a> <a href="category.php" <?php echo ($currentPage == "category") ? ' class="current-page-item"' : '' ?>>Category</a> <a href="contact-us.php" <?php echo ($currentPage == "contact-us") ? ' class="current-page-item"' : '' ?>>Contact US</a> <a href="manage-site" target="_blank">Manage Site</a> </nav> </header> </div> </div> </div> </div> <?php if ($currentPage == "index") { try { $stmt = $DB->prepare("SELECT * FROM " . TABLE_TAGLINE . " WHERE 1 LIMIT 1"); $stmt->bindValue(":pname", $pageAlias); $stmt->execute(); $details = $stmt->fetchAll(); } catch (Exception $ex) { echo errorMessage($ex->getMessage()); } ?> <div id="banner-wrapper"> <div class="container"> <div class="row"> <div class="12u"> <div id="banner"> <h2><?php echo stripslashes($details[0]["tagline1"]); ?></h2> <span><?php echo stripslashes($details[0]["tagline2"]); ?></span> </div> </div> </div> </div> </div> <?php } ?> <div id="main"> <div class="container"> |
footer.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
</div> </div> <div id="footer-wrapper"> <div class="container"> <div class="row"> <div class="12u"> <div id="copyright"> <a href="http://www.thesoftwareguy.in" target="_blank">© 2013 - <?php echo date("Y"); ?> www.thesoftwareguy.in</a> All rights Reserved. | Template taken from: <a href="http://html5up.net"> © HTML5 UP</a> </div> </div> </div> </div> </div> <!-- ********************************************************* --> <script src="js/config.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-panels.min.js"></script> </body> </html> |
page.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php require("libs/config.php"); $page = easy_decrypt($_GET["id"]); $pageDetails = getPageDetailsByName($page); include("header.php"); ?> <div class="row main-row"> <div class="8u"> <section class="left-content"> <h2><?php echo stripslashes($pageDetails["page_title"]); ?></h2> <?php echo stripslashes($pageDetails["page_desc"]); ?> </section> </div> <!--sidebar starts--> <?php include("sidebar.php"); ?> <!--sidebar ends--> </div> <?php include("footer.php"); ?> |
contact.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
<?php require("libs/config.php"); $pageDetails = getPageDetailsByName($currentPage); if (isset($_POST["sbtn"])) { $name = db_prepare_input($_POST["your_name"]); $email = db_prepare_input($_POST["your_email"]); $subject = db_prepare_input($_POST["your_subject"]); $message = db_prepare_input($_POST["your_message"]); $message = wordwrap($message, 70, "\r\n"); $to = "thesoftwareguy7@gmail.com"; $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type: text/plain; charset=iso-8859-1" . "\r\n"; $headers .= "From: $name <$email>" . "\r\n"; $headers .= "X-Mailer: PHP/".phpversion(); $res = @mail($to, $subject, $message, $headers); if ($res) { simple_redirect("contact-us.php?msg=success"); } else { simple_redirect("contact-us.php?msg=error"); } } include("header.php"); ?> <style> .rows{ width:100%; height:auto; overflow:hidden; margin-bottom:10px; } .label{ width:100px;color:#000; float:left;padding-top:5px;} .input-row{ width:280px; height:32px; background-color:#FFF; float:left; position:relative; } .input-textarea-row{ width:280px; height:65px; background-color:#FFF; float:left; position:relative; } .textbox{ width:100%; height:24px; border:1px solid #007294;outline:none; background:transparent; color:#000; padding:0px; } .textarea{ width:100%; height:57px; border:1px solid #007294; outline:none; background:transparent; color:#000; padding:0px; } .submit_button{background:#118eb1;padding:2px;border:none;cursor:pointer;} .success{padding-bottom:30px; color:#009900;} .error{padding-bottom:30px; color:#F00;} </style> <script type="text/javascript"> function IsEmail(email) { var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); } function validateForm() { var name = $.trim($("#your_name").val()); var email = $.trim($("#your_email").val()); var subject = $.trim($("#your_subject").val()); var message = $.trim($("#your_message").val()); if (name == "" ) { alert("Enter your name"); $("#your_name").focus(); return false; } else if (name.length < 3 ) { alert("Enter atleast 2 letter."); $("#your_name").focus(); return false; } if (email == "" ) { alert("Enter your email"); $("#your_email").focus(); return false; } else if (!IsEmail(email)) { alert("Enter valid email"); $("#your_email").focus(); return false; } if (subject == "" ) { alert("Enter your subject"); $("#your_subject").focus(); return false; } if (message == "" ) { alert("Enter your message"); $("#your_message").focus(); return false; } return true; } </script> <div class="row main-row"> <div class="8u"> <section class="left-content"> <h2><?php echo stripslashes($pageDetails["page_title"]); ?></h2> <?php echo stripslashes($pageDetails["page_desc"]); ?> <div style="height:30px;clear:both"></div> <?php if ($_GET["msg"] == "success") { ?> <div class="success">Thank you for contacting us. We will get back to you withinh 24 hours.</div> <?php } if ($_GET["msg"] == "error") { ?> <div class="error">There was problem sending mail. please try again or try later.</div> <?php } ?> <form action="contact-us.php" method="post" name="f" onsubmit="return validateForm();"> <div class="rows"> <div class="label"><span style="color:#F00;">*</span>Name: </div> <div class="input-row" ><input name="your_name" id="your_name" type="text" class="textbox" autocomplete="off"></div> </div> <div class="rows"> <div class="label"><span style="color:#F00;">*</span>Email: </div> <div class="input-row" ><input name="your_email" id="your_email" type="text" class="textbox" autocomplete="off"></div> </div> <div class="rows"> <div class="label"><span style="color:#F00;">*</span>Subject: </div> <div class="input-row" ><input name="your_subject" id="your_subject" type="text" class="textbox" autocomplete="off"></div> </div> <div class="rows"> <div class="label"><span style="color:#F00;">*</span>Message: </div> <div class="input-textarea-row" > <textarea class="textarea" name="your_message" id="your_message"></textarea></div> </div> <div class="rows"> <div class="label"></div> <input type="submit" value="send" name="sbtn" class="submit_button" /> </div> </form> </section> </div> <!--sidebar starts--> <?php include("sidebar.php"); ?> <!--sidebar ends--> </div> <?php include("footer.php"); ?> |
sidebar.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<?php $page_id = $pageDetails["page_id"]; if ($_GET["id"] <> "") { // if we are on page.php page. get the parent id and fetch their related subpages $sql = "SELECT * FROM " . TABLE_PAGES . " WHERE status = 'A' AND parent = :parent ORDER BY sort_order ASC"; try { $stmt = $DB->prepare($sql); $stmt->bindValue(":parent", db_prepare_input($pageDetails["parent"])); $stmt->execute(); $pagesResults = $stmt->fetchAll(); } catch (Exception $ex) { echo errorMessage($ex->getMessage()); } } elseif ($page_id <> "") { // On any other Page get the page id and fetch their related subpages $sql = "SELECT * FROM " . TABLE_PAGES . " WHERE status = 'A' AND parent = :parent ORDER BY sort_order ASC"; try { $stmt = $DB->prepare($sql); $stmt->bindValue(":parent", db_prepare_input($page_id)); $stmt->execute(); $pagesResults = $stmt->fetchAll(); } catch (Exception $ex) { echo errorMessage($ex->getMessage()); } } ?> <div class="3u"> <?php if (count($pagesResults) > 0) { ?> <section> <h2>sub pages</h2> <div> <div class="row"> <div class="12u"> <ul class="link-list"> <?php foreach ($pagesResults as $rs) { ?> <li><a href="page.php?id=<?php echo easy_crypt($rs["page_alias"]); ?>"><?php echo stripslashes($rs["page_title"]); ?></a></li> <?php } ?> </ul> </div> </div> </div> </section> <?php } ?> <section> <h2>Follow me on Google Plus</h2> <div> <div class="row"> <div class="12u"> <div class="g-person" data-href="https://plus.google.com/116523474604785207782" data-rel="author" data-layout="landscape"></div> </div> </div> </div> </section> <section> <h2>Follow me on Twitter</h2> <div> <div class="row"> <div class="12u"> <a class="twitter-follow-button" href="https://twitter.com/thesoftwareguy7" data-show-count="true" data-size="large" data-lang="en" > Follow @thesoftwareguy7 </a> <script type="text/javascript"> window.twttr = (function (d, s, id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src= "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } }); }(document, "script", "twitter-wjs")); </script> </div> </div> </div> </section> <section> <h2>Like us on facebook</h2> <div> <div class="row"> <div class="12u"> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FThesoftwareguy7&width&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&appId=198210627014732" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe> </div> </div> </div> </section> <section> <h2>Follow on Google Plus</h2> <div> <div class="row"> <div class="12u"> <!-- Place this tag where you want the widget to render. --> <div class="g-page" data-width="299" data-href="//plus.google.com/115374397759986535215" data-layout="landscape" data-rel="publisher"></div> <!-- Place this tag after the last widget tag. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> </div> </div> </section> </div> |
category.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php require("libs/config.php"); $pageDetails = getPageDetailsByName($currentPage); include("header.php"); ?> <div class="row main-row"> <div class="8u"> <section class="left-content"> <h2><?php echo stripslashes($pageDetails["page_title"]); ?></h2> <?php echo stripslashes($pageDetails["page_desc"]); ?> </section> </div> <!--sidebar starts--> <?php include("sidebar.php"); ?> <!--sidebar ends--> </div> <?php include("footer.php"); ?> |
about-us.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php require("libs/config.php"); $pageDetails = getPageDetailsByName($currentPage); include("header.php"); ?> <div class="row main-row"> <div class="8u"> <section class="left-content"> <h2><?php echo stripslashes($pageDetails["page_title"]); ?></h2> <?php echo stripslashes($pageDetails["page_desc"]); ?> </section> </div> <!--sidebar starts--> <?php include("sidebar.php"); ?> <!--sidebar ends--> </div> <?php include("footer.php"); ?> |
