cara membuat web dinamis sederhana

23
7/23/2019 Cara Membuat Web Dinamis Sederhana http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 1/23 Cara Membuat Web Dinamis Sederhana Bagian 1 (PHP dan Mysql) Posted by TEKNIK INFORMATIKA on Tuesday, 12 May 2015 Web dinamis adalah website yang mana pengguna (client) bisa merubah konten dari halaman tertentu menggunakan browser dan interaksi yang terjadi antara pengguna dan server sangat kompleks. Permintaan dari pengguna dapat diproses oleh server yang kemudian ditampilkan dengan isi yang berbeda-berbeda menurut alur programnya. web dinamis memungkinkan anda untuk merubah data melalui halaman admin tanpa harus merubah kodingannya. untuk membuat web dinamis anda dapat menggunakan bahasa php dan mysql sebagai databasenya..  1. Pertama anda harus mempunyai aplikasi yang bernama xampp yaitu sebagai server yang berdiri sendiri(localhost), anda bisa mendownloadnya di internet, untuk installnya cukup mudah, ikuti saja instruksinya. 2. Setelah anda berhasil menginstal xampp, buka aplikasinya dan start "Apache" dan "Mysql" lalu buka browser anda direkomendasikan Firefox atau Chrome. Lalu Ketikkan localhost/phpmyadmin di address bar untuk mengolah database mysql 

Upload: su3tajaya

Post on 18-Feb-2018

235 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 1/23

Cara Membuat Web Dinamis Sederhana

Bagian 1 (PHP dan Mysql) 

Posted by TEKNIK INFORMATIKA on Tuesday, 12 May 2015

Web dinamis adalah website yang mana pengguna (client) bisa merubahkonten dari halaman tertentu menggunakan browser dan interaksi yangterjadi antara pengguna dan server sangat kompleks. 

Permintaan dari pengguna dapat diproses oleh server yang kemudianditampilkan dengan isi yang berbeda-berbeda menurut alur programnya.web dinamis memungkinkan anda untuk merubah data melalui halamanadmin tanpa harus merubah kodingannya. untuk membuat web dinamis anda dapat menggunakan bahasa php dan

mysql sebagai databasenya.. 

1. Pertama anda harus mempunyai aplikasi yang bernama xampp yaitusebagai server yang berdiri sendiri(localhost), anda bisa mendownloadnya diinternet, untuk installnya cukup mudah, ikuti saja instruksinya.

2. Setelah anda berhasil menginstal xampp, buka aplikasinya dan start"Apache" dan "Mysql" lalu buka browser anda direkomendasikan Firefox atauChrome. Lalu Ketikkan localhost/phpmyadmin di address bar untukmengolah database mysql 

Page 2: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 2/23

 

3. Setelah muncul laman phpmyadmin, pertama anda buat databasedengan nama db_web, lalu buat table untuk admin ketikkan kode di bawahini di tab SQL : 

create table admin (username varchar(15) not null primary key, 

password varchar(15) not null, level varchar(15) not null) 

setelah berhasil di eksekusi, saatnya untuk membuat web yang akanmenampilkan databasenya.. 

4. untuk membuat web, pertama anda harus membuat homepage terlebihdahulu, buka aplikasi editor seperti notepad atau notepad ++ dll laluketik/copas kode di bawah ini dan beri nama file "index.php" 

<!DOCTYPE HTML PUBLIC>

<html><head><title>Kerangka Web</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="style.css" rel="stylesheet" type="text/css"></head>

<body><table width="900" border="0" align="center" cellpadding="0"cellspacing="0">

<tr bgcolor="gray"><td height="100" colspan="2"></td>

</tr><tr bgcolor="black"><td colspan="2"><marquee onmouseover="this.stop()"

onmouseout="this.start()" truespeed="true" scrollamount="1"scrolldelay="40" direction="left">

Page 3: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 3/23

  <strong><div id="login">Selamat Datang Di Website Kami, Website IniMasih Dalam Tahap Pembuatan</div></strong></marquee>

</td></tr><tr><td width="200" height="600" valign="top" bgcolor="gray"><table

width="200" border="0" cellspacing="0" cellpadding="0"><tr><td><form name="form1" method="post" action="cek_login.php"><table width="200" border="0" cellspacing="0" cellpadding="2"><tr bgcolor="#003366"><td height="30" colspan="2"><div align="center"><div

id="login"><strong>Login Admin </strong></div></div></td></tr>

<tr><td width="74" height="30"><b>Username</b></td><td width="126">:

<input name="username" type="text" id="username"size="10"></td>

</tr><tr><td height="30"><b>Password</b></td><td>:

<input name="password" type="password" id="password"size="10"></td>

</tr><tr><td height="30">&nbsp;</td><td><input type="submit" name="Submit" value="Login"></td>

</tr></table>

</form> 

</td>

</tr><tr><td><div id="kiri"> 

<div id="login"> 

<p><center><b>PROFIL</center></p><p>Nama : Banu Ari Ramadhan </p> 

<p>Web : banuaril10.blogspot.com</p></b> 

</div> 

Page 4: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 4/23

</div> 

</td></tr>

</table></td>

<td valign="top">&nbsp;</td></tr><tr bgcolor="black"><td height="80" colspan="2"><div id="login"><center>Copyright 2015

<br>Design : Banu Ari Ramadhan</div></td></tr>

</table></body></html>5. Untuk membuat tampilan web terlihat bagus, buat desain css untuk webtersebut buat file bernama "style.css" lalu ketik/copas kode di bawah ini : 

#kiri { font-size:12px; border-radius:5px;border:6px;height:120px; padding:10px;background-color:black;float:left;width:165px; margin-top:40px;margin-left:8px;}#login{color:white; } 

penjelasan : 

#kiri adalah untuk desain web bagian kiri #login adalah untuk desain tulisan pada form login 

6. untuk melihat hasilnya simpan file "index.php" dan "style.css" padaC:>/xampp/htdocs/web(buat folder baru bernama web) lalu jalankanmelalui address bar browser anda dengan mengetikan : localhost/web/index.php lalu lihat hasilnya..note : jangan lupa aktifkan xampp anda (start Apache dan Mysql) 

anda sudah membuat homepage sederhana untuk data yang akan ditampilkan nanti.. bagian selanjutnya saya akan posting cara membuat koneksi untukmembuat halaman admin

Page 5: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 5/23

Bagian 2 (Sistem Login dan Logout)

Untuk melanjutkan postingan sebelumnya mengenai cara membuat webdinamis sederhana, Kali ini saya akan posting cara membuat Sistem loginuntuk admin.Pertama anda harus membuat database untuk admin, seperti yang sudahada di postingan sebelumnya

1. Buka XAMPP lalu aktifkan Apache dan Mysql, lalu ketikkan di URL Browser :

localhost/phpmyadmin  Setelah muncul laman phpmyadmin, pertama anda buat

database dengan nama db_web, lalu buat table untuk admin ketikkan kode di bawah

ini di tab SQL : 

create table admin (

username varchar(15) not null primary key, 

password varchar(15) not null, 

level varchar(15) not null

lalu insert data dengan : 

username : admin password : admin level : admin

setelah berhasil membuat tabel admin, lalu kita akan membuat koneksi menujudatabasenya 

2. buat folder di dalam htdocs dan beri nama web lalu buka notepad (disarankannotepad ++) lalu ketikkan kode di bawah ini dan Simpan di folder htdocs/web dengan

nama koneksi.php: <?php$server= "localhost";$username = "root";$password = "";$database = "db_web";

mysql_connect($server,$username,$password) or die ("Koneksi Gagal");

Page 6: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 6/23

mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );

?>

3. selanjutnya kita membuat form untuk login, ketikkan kode dibawah ini dan Simpan

di folder htdocs/web dengan nama index.php: 

<?php 

session_start(); 

if (isset($_SESSION['username'])){ 

echo"Anda Telah Login, Silahkan masuk ke <ahref='admin.php'>Admin</a><br>Jika Anda Ingin Logout <ahref='logout.php'>Klik Di Sini</a>" 

?> 

<?php }else{ 

?> 

<html> 

<title>Login Admin</title> 

<style type="text/css"> 

<!-- 

.judul { 

background-color: #00FF00; 

--> </style> 

<body bgcolor="black"> 

<style type="text/css"> 

<!-- 

.style2 {color: #166D12} 

--> 

</style> 

<div align="center"> 

<p>&nbsp;</p> 

<h1 class="judul"><strong>--->LOGIN ADMIN<---</strong></h1> 

<br /><br /> 

<form method="post" action="login.php"> 

<table width="329" height="198" border="0" align="center"bgcolor="#00FF00"> 

<tr> 

<th width="24" rowspan="3" scope="row">&nbsp;</th> 

<th height="35%" colspan="3" scope="row">&nbsp;</th> 

Page 7: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 7/23

  <td width="22" rowspan="3">&nbsp;</td> 

</tr> 

<tr> 

<th width="85" height="45" scope="row"> <divalign="left">Username</div></th> 

<td width="15">:</td> <td width="161"> 

<input type="text" name="username" /></td> 

</tr> 

<tr> 

<th height="47" scope="row"><div align="left">Password</div></th> 

<td>:</td> 

<td><input type="password" name="password" /></td> 

</tr> 

<tr> 

<th height="45" colspan="5" scope="row"> 

<input type="submit" name="Submit" value="Login" /><input name="reset" type="reset" value="Reset" /></th> 

</tr> 

<tr> 

<th height="27" colspan="5" scope="row">&nbsp;</th> 

</tr> 

</table> 

</form> 

</div> 

</body> 

</html> <?php 

?> 

4. Selanjutnya kita akan membuat kode untuk mengecek data admin (username dan

password) , ketikkan kode di bawah ini dan Simpan di folder htdocs/web dengan

nama login.php:

<?php session_start();ob_start();include "koneksi.php";

$username = $_POST['username'];$pass = $_POST['password'];

$login=mysql_query("SELECT * FROM admin WHEREusername='$username' AND password='$pass'");$ketemu = mysql_num_rows($login);$r=mysql_fetch_array($login);

Page 8: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 8/23

if ($ketemu > 0) {

$_SESSION[namauser] = $r[username];

$_SESSION[passuser] = $r[password];

$_SESSION[leveluser]= $r[level];header('location:admin.php');}else{?><script>alert("Logingagal!");document.location.href="index.php"</script><?phpecho mysql_error();}?>

5. Selanjutnya kita membuat halaman admin jika berhasil login akan muncul halamanini, ketikkan kode dibawah ini dan Simpan di folder htdocs/web dengannama admin.php: <h1> Anda Berhasil Login </h1><br>Jika Anda Ingin Logout <a href='logout.php'>Klik Di Sini</a>6. Terakhir kita membuat logout ketikkan kode dibawah ini dan Simpan di

folder htdocs/web dengan nama logout.php: 

<?php session_start(); ob_start(); session_destroy(); header('location:index.php'); ?> 

7. Jika berhasil logout anda akan langsung menuju halaman form login.. 

Sekian tutorial sederhana ini, jika ada yang di tanyakan silahkan beri komentar :)semoga saya bisa menjawab :vPostngan selanjutnya saya akan membuat Input, Edit dan Delete data pada tabel... 

Page 9: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 9/23

Bagian 3 (Input, Edit dan Delete)

Posted by TEKNIK INFORMATIKA on Friday, 10 July 2015

data barang

Sebelumnya kita sudah membuat sistem login dan logout. Kali ini saya akan

memberikan langkah-langkah dan kode untuk membuat perintah Input, Editdan Delete data pada tabel.. 

1. Pertama-tama seperti biasa Buka XAMPP lalu aktifkan Apache dan Mysql,lalu ketikkan di URL Browser : localhost/phpmyadmin maka muncullaman phpmyadmin, jika anda mengikuti tutorial sebelumnya buka databasedengan nama db_web, jika belum ada anda bisa membuat databasenya,lalu buat table data untuk menyimpan data yang akan kita kelola, ketikkankode SQL di bawah ini: 

create table barang ( 

kode char(10) not null primary key, 

namabarang varchar(50) not null, harga bigint ) 

2. Selanjutnya kita akan membuat koneksi ke databasenya,buat folder di dalam htdocs dan beri nama barang lalu buka notepad(disarankan notepad ++) lalu ketikkan kode di bawah ini dan Simpan difolder htdocs/barang dengan nama koneksi.php: 

<?php

$server= "localhost";

$username = "root";$password = "";

$database = "db_web";

mysql_connect($server,$username,$password) or die ("Koneksi Gagal");

Page 10: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 10/23

mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );

?>

3. Selanjutnya kita akan membuat form input barang, ketikkan kode dibawah ini dan Simpan di folder htdocs/barang dengannama formbarang.php: 

<html><head> 

<title>Input Data Barang</title> 

</head><body> 

<h2>Data Barang</h2> 

<form action="savebarang.php" method="POST"> 

<table><tr> 

<td>Kode Barang</td> <td>: <input type="text" name="kode" size="10"></td> 

</tr> 

<tr> 

<td>Nama Barang</td> 

<td>: <input type="text" name="namabarang" size="30"></td> 

</tr> 

<tr> 

<td>Harga Satuan</td> 

<td>: <input type="text" name="harga" size="20"></td> 

</tr> 

<tr> 

<td colspan=2><input type="submit" value="Kirim"></td> 

</tr></table></form> 

</body></html> 

Kode diatas adalah jika kita klik tombol Kirim maka akan langsungmemproses file savebarang.php maka dari itu selanjutnya kita akanmembuat file savebarang.php 

4. Kemudian kita akan membuat kode untuk menyimpan data kedalammysql, ketikkan kode di bawah ini dan Simpan di

folder htdocs/barang dengan nama savebarang.php::<?php ob_start(); 

include "koneksi.php"; 

$kode = $_POST['kode']; $nama = $_POST['namabarang']; 

$harga = $_POST['harga']; 

Page 11: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 11/23

 mysql_query("INSERT INTO barang(kode,namabarang,harga) 

VALUE('$kode','$nama','$harga')")or die(mysql_error()); 

header('location:tampilbarang.php'); ?> 

5. Selanjutnya kita akan membuat tabel untuk menampilkan data yangtelah kita input. Ketikkan kode di bawah ini dan Simpan difolder htdocs/barang dengan nama tampilbarang.php: <?php 

include "koneksi.php"; 

include "formbarang.php"; 

echo "<center><table border=1><tr bgcolor=orange> 

<td><b><center>No</td> 

<td><b><center>Kode Barang</td> 

<td><b><center>Nama Barang</td> 

<td><b><center>Harga Satuan</td> 

<td><b><center>Delete</td> 

<td><b><center>Edit</td> 

</tr>"; 

$query=mysql_query("SELECT * FROM barang ORDER BY kode"); 

$no=1; 

while($var=mysql_fetch_array($query)){ 

echo "<tr> 

<td>$no</td> 

<td>$var[kode]</td> 

<td>$var[namabarang]</td> 

<td>$var[harga]</td> <td><center><ahref='deletebarang.php?kode=$var[kode]'>Delete</a></td> 

<td><center><ahref='formeditbarang.php?kode=$var[kode]'>Edit</a></center></td> 

</tr>"; 

$no++; 

echo "</table><br><b>Data Barang by banuaril10.blogspot.com</b>"; 

?> 

6. Selanjutnya kita akan membuat perintah delete, ketikkan kode di bawahini Ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengannama deletebarang.php: 

<?php ob_start(); 

include "koneksi.php"; 

mysql_query("delete from barang where kode='$_GET[kode]'"); 

header('location:tampilbarang.php'); 

Page 12: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 12/23

 

?> 

7. Selanjutnya kita akan membuat perintah edit barang, ketikkan kode dibawah ini Ketikkan kode di bawah ini dan Simpan difolder htdocs/barang dengan nama formeditbarang.php : 

<?phpinclude "koneksi.php"; 

$kode=$_GET['kode']; $query=mysql_query("select * from barang where kode='$kode'"); ?> 

<html><head><title>Halaman Edit Data Barang</title><head><body> 

<form action="editbarang.php" method="post"> 

<table border="0"> 

<?php 

while($row=mysql_fetch_array($query)){ 

?> 

<input type="Hidden" name="no" value="<?php echo $no;?>" /> 

<h2>Data Barang</h2> 

<form action="savebarang.php" method="POST"> 

<table><tr> 

<td>Kode Barang</td> 

<td>: <input type="text" name="kode" value="<?php echo$row['kode'];?>" size="10"></td> 

</tr> 

<tr> 

<td>Nama Barang</td> 

<td>: <input type="text" name="namabarang" value="<?php echo$row['namabarang'];?>"size="30"></td> 

</tr> 

<tr> 

<td>Harga Satuan</td> 

<td>: <input type="text" name="harga" value="<?php echo$row['harga'];?>"size="20"></td> 

</tr> 

<tr> 

<td colspan=2><input type="submit" value="Update"></td> 

</tr> 

<?php } ?> 

</table></form> 

</body></html> 

Fungsi kode ini adalah untuk menampilkan data yang kita klik ke dalam formyang akan kita edit nanti 

Page 13: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 13/23

value="<?php echo $row['kode'];?> 

8. Selanjutnya kita akan membuat file yang akan memproses form editbarang dan akan menggantikan dengan data yang baru, ketikkan kode dibawah ini dan Simpan di folder htdocs/barang dengannama editbarang.php : 

<?php ob_start(); include "koneksi.php"; 

$kode = $_POST['kode']; $nama = $_POST['namabarang']; 

$harga = $_POST['harga']; 

$query=mysql_query("update barang set kode='$kode',namabarang='$nama', harga='$harga' where kode='$kode'"); 

header('location:tampilbarang.php'); ?> 

Terakhir jalankan program melalui URL browser anda,ketikkan localhost/barang/tampilbarang.php silahkan coba satu-persatuapakah ada error? :v script sudah di coba di saya 100% berhasil gan, jikaada error silahkan tinggalkan komentar, semoga saya bisa membantu.. 

Page 14: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 14/23

Bagian 4 (Membuat Gallery Photo)

Posted by TEKNIK INFORMATIKA on Monday, 19 October 2015

gallery banuaril10.blogspot.com 

Assalamu'alaikum salam ngoding :D , Setelah sekian lama tidak posting, Kaliini saya akan memulai kembali dengan tutorial yang sederhana, yaitu caramembuat gallery photo menggunakan php.Oke langsung saja ke TKP... 

Pertama, kita harus membuat database untuk menyimpan data gallery 

1. seperti biasa Buka XAMPP lalu aktifkan Apache dan Mysql, lalu ketikkan diURL Browser : localhost/phpmyadmin maka muncul laman phpmyadmin, jika anda mengikuti tutorial sebelumnya buka database dengannama db_web, jika belum ada anda bisa membuat databasenya, lalu buattable data untuk menyimpan data gallery yang akan kita upload nanti,ketikkan kode SQL di bawah ini: 

create table gallery (id_gallery int not null primary key auto_increment,judulvarchar(50) not null, photo varchar(50) not null ) 

2. Selanjutnya kita akan membuat koneksi ke databasenya,

buat folder di dalam htdocs dan beri nama gallery lalu buka notepad(disarankan notepad ++) lalu ketikkan kode di bawah ini dan Simpan difolder htdocs/gallery dengan nama koneksi.php: 

<?php$server= "localhost";$username = "root";$password = "";$database = "db_web";

Page 15: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 15/23

 mysql_connect($server,$username,$password) or die ("Koneksi Gagal");

mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );

?>

3. Selanjutnya kita akan membuat form untuk upload gambar, ketikkankode di bawah ini dan Simpan di folder htdocs/gallery dengannama gallery.php: 

<form method="post" action="gallerysave.php" enctype="multipart/form-data"> 

<center> 

<tr> 

<td>CAPTION PHOTO</td><br> 

<td><input type="text" placeholder="Type your Caption here..."maxlength="500" name="judul" required/></td><br><br> 

</tr> 

<tr> 

<td><input type="file" id="images" name="images"></td> 

</tr> 

<center> 

<br><input title="simpan" type="submit" name="submit"value="Simpan" /><br> 

<br> </form>4. Berikutnya kita akan membuat kode untuk menyimpan data kedalammysql, sebelumnya buat terlebih dahulu folder dengan nama photo-gallery di dalam htdocs/gallery untuk menyimpan photo yang nantinyakita upload. Ketikkan kode di bawah ini dan Simpan difolder htdocs/gallery dengan nama gallerysave.php: 

<?php ob_start(); 

include "koneksi.php"; 

if($_POST){ 

$judulpost = $_POST['judul']; $photo = $_FILES['images']['name']; 

move_uploaded_file($_FILES['images']['tmp_name'], 'photo-gallery/'.$_FILES['images']['name']); mysql_query("insert into gallery(judul,photo) 

values('$judulpost','$photo' )"); 

header('location:gallery.php'); 

Page 16: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 16/23

 exit; 

?> 

fungsi dari move_uploaded_file yaitu memindahkan file yang kita uploadke dalam folder photo-gallery yang telah kita buat tadi.. 

5. Selanjutnya kita akan membuat tabel untuk menampilkan gallery yangtelah kita input. buka file gallery.php yang sudah kita buat, dan tambahkankode(background biru) dibawah </form> : 

<form method="post" action="gallerysave.php" enctype="multipart/form-data"> 

<center> 

<tr> 

<td>CAPTION PHOTO</td><br> 

<td><input type="text" placeholder="Type your Caption here..."

maxlength="500" name="judul" required/></td><br><br> 

</tr> 

<tr> 

<td><input type="file" id="images" name="images"></td> 

</tr> 

<center> 

<br><input title="simpan" type="submit" name="submit"value="Simpan" /><br> 

<br> 

</form>

<table border="1px"> <tr><th><center>Judul</th> 

<th><center>Photo</th> 

<th><center>Aksi</th> 

</tr> 

<?php 

include "koneksi.php"; 

$has = mysql_query("select * from gallery order by id_gallery desc"); 

while($data=mysql_fetch_array($has)){ 

echo '<tr> 

<td>'.$data['judul'].'</td> 

<td><img width="50px" src="photo-gallery/'.$data['photo'].'"/></div></td> 

</tr> '; 

Page 17: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 17/23

?> 

</table> 

6. Berikutnya kita coba terlebihdahulu, ketikkan localhost/gallery/gallery.php silahkan coba input

gallery, jika berhasil tabel gallery dibawahnya akan menampilkan data yangtelah kita input.. 

7. Selanjutnya kita akan mencoba menghapus data gallery. bukafile gallery.php yang sudah kita buat, dan tambahkankode(background kuning) : 

<form method="post" action="gallerysave.php" enctype="multipart/form-data"> 

<center> 

<tr> 

<td>CAPTION PHOTO</td><br> 

<td><input type="text" placeholder="Type your Caption here..."maxlength="500" name="judul" required/></td><br><br> 

</tr> 

<tr> 

<td><input type="file" id="images" name="images"></td> 

</tr> 

<center> 

<br><input title="simpan" type="submit" name="submit"value="Simpan" /><br> 

<br> 

</form><table border="1px"> 

<tr><th><center>Judul</th> 

<th><center>Photo</th> 

<th><center>Aksi</th> 

</tr> 

<?php 

include "koneksi.php"; 

$has = mysql_query("select * from gallery order by id_gallery desc"); while($data=mysql_fetch_array($has)){ 

echo '<tr> 

<td>'.$data['judul'].'</td> 

<td><img width="50px" src="photo-gallery/'.$data['photo'].'"/></div></td> 

<td> <a href="gallerydelete.php?id_gallery='.$data['id_gallery'].'"

Page 18: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 18/23

style="text-decoration:none;color:red;"><center>Delete</a></td> 

</tr> '; 

?> 

</table> 

ketika link delete di klik maka akan memproses "gallerydelete.php" danfungsi ?id_gallery='.$data['id_gallery'].'" adalah untuk menampilkanid_gallery yang akan di delete 

8. Selanjutnya kita buat proses untuk menghapus data gallery, Ketikkankode di bawah ini dan Simpan di folder htdocs/gallery dengannama gallerydelete.php: 

<?php 

include "koneksi.php";

$a=mysql_query("select * from gallery where id_gallery='$_GET[id_gallery]'"); 

$cek=mysql_fetch_array($a); $folder ="photo-gallery/$cek[photo]"; 

unlink($folder); 

$delete = mysql_query("delete from gallery whereid_gallery='$_GET[id_gallery]'"); 

echo"<script>alert('gallery berhasil dihapus');window.location='gallery.php'</script>"; ?> 

fungsi unlink yaitu untuk menghapus file yang telah kita upload sebelumnyadi folder photo-gallery 

Terakhir jalankan program melalui URL browser anda,ketikkan localhost/gallery/gallery.php silahkan coba delete gallery.Script sudah di coba di saya insya Allah 100% berhasil gan, jika ada errorsilahkan tinggalkan komentar, semoga saya bisa membantu.. 

Page 19: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 19/23

Bagian 5 (Input, Menampilkan Artikel dan

Membuat Read More)

Posted by TEKNIK INFORMATIKA on Tuesday, 24 November 2015

daftar artikel

Sebelumnya kita sudah membuat gallery photo. Kali ini saya akan memberikan tutorial

sedikit, bagaimana cara input,menampilkan artikel dan read more..

1. Pertama-tama seperti biasa Buka XAMPP lalu aktifkan Apache dan Mysql, lalu ketikkan di

URL Browser : localhost/phpmyadmin maka muncul laman phpmyadmin, jika anda

mengikuti tutorial sebelumnya buka database dengan nama db_web, jika belum ada anda

bisa membuat databasenya pada form create new database,Jika database sudah di buat buka tab SQL, lalu ketikkan kode di bawah ini:  

create table artikel

(

id_artikel int not null primary key auto_increment,

 judul_artikel varchar(100),

isi_artikel text,

penulis_artikel varchar(250),

photo_artikel varchar(250),

tgl_artikel timestamp

)

2. Buat folder bernama "artikel" di dalam htdocs, lalu buat file "koneksi.php" di dalam

folder artikel, berikut kodenya : 

<?php

$server= "localhost";

Page 20: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 20/23

 $username = "root";

$password = "";

$database = "db_web";

mysql_connect($server,$username,$password) or die ("Koneksi Gagal");

mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );

?>

3. Selanjutnya kita akan membuat form input artikel, ketikkan kode di bawah ini

dan Simpan di folder htdocs/artikel dengan nama formartikel.php: 

<form id="formberita" method="post" action="saveartikel.php" enctype="multipart/form-data"> <center><p> <label>Judul Artikel:</label><br> <input type="text" id="judul_artikel" name="judul_artikel" required> 

</p> 

<p> <label>Isi Artikel:</label><br> <textarea style="width:600px; height:450px" id="isi_artikel" name="isi_artikel"

required></textarea> 

</p> 

<p> <label>Penulis Artikel:</label><br> <input type="text" id="penulis_artikel" name="penulis_artikel" required> 

</p> 

<p> 

<label>Photo Artikel:</label><br> <input type="file" id="images" name="images"/> 

</p> 

<td colspan=2><input type="submit" id="submit" value="Kirim"></td> 

</form> 

Page 21: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 21/23

Jika tombol kirim di klik maka action akan langsung memproses file saveartikel.php (warnakuning) dan data yang di form akan di baca melalui name input nya (warna hijau). 

3. Untuk menyimpan data form input diatas, selanjutnya kita akan membuat kode untuk

menyimpan data form kedalam mysql, ketikkan kode di bawah ini dan Simpan di

folder htdocs/artikel dengan nama saveartikel.php: 

<?php ob_start(); include "koneksi.php"; if($_POST){ $judulartikel = $_POST['judul_artikel']; $isiartikel = $_POST['isi_artikel']; $penulisartikel = $_POST['penulis_artikel']; $photoartikel = $_FILES['images']['name']; 

if(!empty($_FILES['images']['tmp_name'])){ move_uploaded_file($_FILES['images']['tmp_name'],'photo-

artikel/'.$_FILES['images']['name']); 

mysql_query("insert into artikel(judul_artikel, isi_artikel, penulis_artikel, photo_artikel) values('$judulartikel', '$isiartikel', '$penulisartikel', '$photoartikel')");

} else { mysql_query("insert into artikel(judul_artikel, isi_artikel, penulis_artikel) values('$judulartikel', '$isiartikel' ,'$penulisartikel')"); 

} header('location:artikel.php'); exit; 

?> 

 jangan lupa buat folder bernama photo-artikel karena file photo yang kita input akan di

masukan ke dalam folder photo-artikel (orange). 

4. Setelah data berhasil kita input, lalu kita akan menampilkan artikel yang telah kita

input, ketikkan kode di bawah ini dan Simpan di folder htdocs/artikel dengan

nama artikel.php: 

<center><h2>Index Artikel</h2></center> 

<?php include "koneksi.php"; 

Page 22: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 22/23

$has = mysql_query("select * from artikel order by tgl_artikel desc"); $num = mysql_num_rows($has); 

if($num<1){ echo'<center>Tidak Ada Artikel</center>'; 

}else{ 

while($data=mysql_fetch_array($has)){ $art = substr($data['isi_artikel'],0,100); echo ' 

<h2>'.$data['judul_artikel'].'</h2> <img width="330" height="280" src="photo-artikel/'.$data['photo_artikel'].'"> <h4>Di publikasikan pada '.$data['tgl_artikel'].'</h4> <h4>Oleh '.$data['penulis_artikel'].'</h4> <p>'.$art.'..</p> <a href="single.php?p='.$data['id_artikel'].'">Read More</a> 

<br><br> 

';} 

} ?> 

isi Artikel yang di tampilkan tidak melebihi 100 karakter (biru), untuk menampilkan semua

isi dari artikel klik read more dan akan muncul tampilan lengkap artikel.. dan ketika readmore di klik akan menuju link single.php yang menampilkan artikel berdasarkan id artikelyang di pilih (kuning) 

5. Berikut adalah script untuk menampilkan semua artikel ketika read more di klik, buat filebernama single.php dan ketikkan kode di bawah ini : 

<?php 

include "koneksi.php"; $id = $_GET['p']; 

$hasil = mysql_query("select * from artikel where id_artikel='$id'"); 

$data=mysql_fetch_array($hasil); 

$file = 'artikel/'.$data['photo_artikel'].''; 

if ($file =="artikel/"){ 

echo ' 

<h3> '.$data['judul_artikel'].' </h3>

<p>Posted by '.$data['penulis_artikel'].' <br> 

Pada Tanggal '.$data['tgl_artikel'].'</p>

<p>'.$data['isi_artikel'].'</p>

';} 

else { 

echo ' 

<img width="400" src="photo-artikel/'.$data['photo_artikel'].'" alt="" /> 

<h3>'.$data['judul_artikel'].'</h3> 

Page 23: Cara Membuat Web Dinamis Sederhana

7/23/2019 Cara Membuat Web Dinamis Sederhana

http://slidepdf.com/reader/full/cara-membuat-web-dinamis-sederhana 23/23

<p>Posted by '.$data['penulis_artikel'].' <br>

Pada Tanggal '.$data['tgl_artikel'].'</p>

<p>'.$data['isi_artikel'].'</p>

';} 

?>

Terakhir jalankan program melalui URL browser anda,ketikkan localhost/artikel/formartikel.php silahkan coba di input gan script sudah di

coba di saya insya Allah 100% berhasil gan, jika ada error silahkan tinggalkan komentar..