Judul : Tutorial Pemrograman web dengan php dan mysql.
link : Tutorial Pemrograman web dengan php dan mysql.
Tutorial Pemrograman web dengan php dan mysql.
Hal-hal yang diperlukan terlebih dahulu dalam pembuatan web adalah memenuhi kelengkapan seperti dibawah ini:
- Install program XAMPP sebagai webserver localhost yang akan kita gunakan.
- Text Editor seperti misalnya Notepad++ atau Dreamweaver.
- Database MySql sebagai tempat kita menaruh database untuk web kita.
- Browser untuk mencoba menjalan web yang kita buat seperti Mozilla atau Chrome.
Setelah melengkapi hal-hal diatas maka kita sudah siap untuk membuat suatu apliakasi web sederhana.
Hal yang pertama kita lakukan dalam
membuat sebuah aplikasi web adalah dengan merancang dan mendesain
kerangka tampilan web kita. Ada dua cara yang bisa dianjurkan antara
lain merancang sendiri mulai dari nol mulai dari html, css serta
javascript-nya atau bisa dengan mencari template web yang telah banyak
tersedia di internet jadi yang perlu kita lakukan adalah mengedit
sedikit isi dari template tersebut.
Template yang akan kita gunakan adalah Orange Mint Template. Berikut adalah tampilan dari template yang akan kita pakai selama tutorial ini.
Tampilan Orange Mint Template
Setelah mendapatkan template yang kita
inginkan langkah selanjutnya adalah menaruhnya didalam xampp/htdocs.
Adapun langkah-langkahnya seperti berikut:
- Copy file template yang telah kita unduh.
- Lalu masuk kedalam folder xampp yang telah kita ada sebelumnya dan masuk kedalam folder htdocs.
- Setelah itu buat folder baru dan namakan sesuai yang kita inginkan ( disini saya menamainya “TKGBlog”).
- Paste dan Extract template tersebut sehingga didapatkan beberapa file yang biasanya adalah: index.html, style.css dan folder images.
- Rename file index.html menjadi index.php.
Untuk mencoba apakah template yang akan
kita pakai berjalan dengan baik adalah dengan masuk kedalam browser lalu
pada Address Bar kita tuliskan localhost/(nama folder didalam htdocs)
contohnya localhost/TKGBlog.
Memanggil Lewat Localhost
Langkah selanjutnya dalam membangun
kerangka web adalah membagi index.php menjadi beberapa bagian seperti
content.php, menu.php, sidebar.php serta yang lain sesuai kebutuhan yang
ada.
Dalam folder TKGBlog buat file baru content.php. Lalu isi dari content.php diambil dari konten yang ada didalam index.php.<div class="post"> <h2 class="title"><a href="#">Welcome to Orange Mint</a></h2> <p class="meta"><span class="date">August 08, 2011</span><span class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>This
is <strong>Orange Mint</strong>, a free, fully
standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org">FCT</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it <img src="http://tutorialkomputergratis.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </p> <p>Sed
lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In
nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus
semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id
eros. Suspendisse lacus turpis, cursus egestas at sem.</p> <p class="links"><a href="#">Read More</a> | <a href="#" title="b0x w">Comments</a></p> </div></div><div class="post"> <h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2> <p class="meta"><span class="date">August 05, 2011</span><span class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>Sed
lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In
nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae
nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est.
Phasellus <a href="#">dapibus
semper urna</a>. Pellentesque ornare, orci in consectetuer
hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam.
Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis,
cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut,
lobortis a, est.</p> <p class="links"><a href="#">Read More</a> | <a href="#">Comments</a></p> </div></div><div class="post"> <h2 class="title"><a href="#">Consecteteur hendrerit </a></h2> <p class="meta"><span class="date">August 03, 2011</span><span class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>Sed
lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In
nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae
nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est.
Phasellus <a href="#">dapibus
semper urna</a>. Pellentesque ornare, orci in consectetuer
hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam.
Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis,
cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut,
lobortis a, est.</p> <p class="links"><a href="#">Read More</a> | <a href="#">Comments</a></p> </div></div><div style="clear: both;"> </div> |
<div id="sidebar"> <ul> <li> <div id="search" > <form method="get" action="#"> <div> <input type="text" name="s" id="search-text" value="" /> <input type="submit" id="search-submit" value="GO" /> </div> </form> </div> <div style="clear: both;"> </div> </li> <li> <h2>Aliquam tempus</h2> <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p> </li> <li> <h2>Categories</h2> <ul> <li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> <li> <h2>Blogroll</h2> <ul> <li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> <li> <h2>Archives</h2> <ul> <li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> </ul></div> |
<ul> <li class="current_page_item"><a href="#">Homepage</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Photos</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li></ul> |
Untuk bagian konten:
1
| <?php include 'konten.php'; ?> |
1
| <?php include 'sidebar.php'; ?> |
1
| <?php include 'menu.php'; ?> |
Fungsinya nanti adalah untuk pemanggilan
file-file yang telah kita buat terpisah tadi kedalam index.php. Serta
jangan lupa untuk mengedit informasi dasar di index.php seperti title
dan yang lainnya. Dan nantinya file index.php kita hanya akan terlihat
seperti ini.
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords" content="" /><meta name="description" content="" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>TKGBlog</title><link href="style.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1><a href="#">TKGBlog</a></h1> <p> Berbagi Itu g Perlu Nunggu Besok</p> </div> <div id="menu"><?php include "menu.php"; ?> </div> </div></div><!-- end header --><div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"><?php include "content.php"; ?> </div> <!-- end content --><?php include "sidebar.php"; ?> <!-- end sidebar --> <div style="clear: both;"> </div> </div> </div> </div> <!-- end page --></div><div id="footer"> <p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org">FCT</a>.</p></div><!-- end footer --></body></html> |
Saat kalian jalankan nanti hasilnya akan sama persis seperti saat index.php belum kita modifikasi salam sekali.
Dengan membuat koordinasi file seperti ini kita tidak perlu untuk terlalu banyak membuat file untuk tiap halaman web blog kita.
Demikianlah Artikel Tutorial Pemrograman web dengan php dan mysql.
Sekianlah artikel Tutorial Pemrograman web dengan php dan mysql. kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Tutorial Pemrograman web dengan php dan mysql. dengan alamat link https://ontechnonews.blogspot.com/2013/07/tutorial-pemrograman-web-dengan-php-dan.html