Cara Membuat Web Dinamis Sederhana(PHP dan Mysql) Bagian 1

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. 



Cara Membuat Web Dinamis Sederhana(PHP dan Mysql) Bagian 1


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


Cara Membuat Web Dinamis Sederhana(PHP dan Mysql) Bagian 1


3.  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 
)
setelah berhasil di eksekusi, saatnya untuk membuat web yang akan menampilkan databasenya..

4.  untuk membuat web, pertama anda harus membuat homepage terlebih dahulu, buka aplikasi editor seperti notepad atau notepad ++ dll lalu ketik/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">  
    <strong><div id="login">Selamat Datang Di Website Kami, Website Ini Masih 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>
</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 web tersebut 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" pada C:>/xampp/htdocs/web(buat folder baru bernama web) lalu jalankan melalui 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 di tampilkan nanti..

bagian selanjutnya saya akan posting cara membuat koneksi untuk membuat halaman admin 

jika ada kekurangan silahkan saran dan kritik di komentar..
Terima kasih sudah berkunjung :)


* sori gan, ane tidak bisa membalas komen satu persatu, jika ada pertanyaan silahkan hubungi wa ane ada di CONTACT ME makasih..

Blog, Updated at: 05:36

43 komentar:

  1. artikel yang bisa dengan mudah dipahami gan, penjelasannya padat dan jelas,,, salam dari kami blog sedot code, semoga agan bisa berkonstribusi kedalam blog kami, ini ada sebuah aplikasi sekolah sederhana yang saya buat sendiri, terima kasih atas beberrapa potongan source code dari blog mas gan banuari

    ReplyDelete
    Replies
    1. oke sama-sama gan, ane juga sudah berkunjung ke blog agan, thanks kunjungannya gan (y)

      Delete
  2. bagus gan
    ttip juga dong gan skripindo15.blogspot.com

    ReplyDelete
  3. matur tengkiyu ilmunya mas
    semoga sampean bisa terus buat artikel yg bermanfaat yaa..

    ReplyDelete
  4. Maaf Gan Pemilik : banuaril10.blogspot.co.id,
    numpang pamer llmu ya,,,

    aGan2 permirsa banuaril10.blogspot.co.id, mari-mari cek cara membuat website dinamis dengan URL bersih / clean URL / Pretty URL… cek langsung kalo suka:

    Artikel :
    http://www.asanoer.com/artikel/asanoer-com-pretty-url-lanjutan.html

    Demo :
    http://demo.asanoer.com/pretty-url-2

    Terima kasih Gan….

    asanoer.com

    ReplyDelete
  5. Gan apakah benar pakai XAMPP versi terbaru tidak bisa?

    ReplyDelete
  6. Keren banget gan..
    penjelasan mudah di mengerttiii...

    ReplyDelete
  7. cek_login.php nya kok nggak kkk buat, nggak seru

    ReplyDelete
  8. ini informasi yg lagi dicari, izin share dulu ya min tq :)

    pokerv
    Agen Poker Online Terpercaya

    ReplyDelete
  9. Tiket Pesawat Murah Online, dapatkan segera di SELL TIKET Klik disini:
    selltiket.com
    Booking di SELLTIKET.COM aja!!!
    CEPAT,….TEPAT,….DAN HARGA Di Jamin Murah!!!

    Ingin usaha menjadi agen tiket pesawat??
    Yang memiliki potensi penghasilan tanpa batas.
    Bergabung segera di agen.selltiket.com

    INFO LEBIH LANJUT HUBUNGI :
    No handphone : 085363402103
    PIN : D364EDCB

    ReplyDelete
  10. FBS – Dapatkan Bonus Deposit Sekarang Juga, bergabung sekarang juga dengan kami
    trading forex http://fbsindonesia.co.id
    -----------------
    Kelebihan Broker Forex FBS
    1. FBS MEMBERIKAN BONUS DEPOSIT HINGGA 100% SETIAP DEPOSIT ANDA
    2. SPREAD DIMULAI DARI 0 Dan
    3. DEPOSIT DAN PENARIKAN DANA MELALUI BANK LOKAL Indonesia dan banyak lagi yang lainya

    Buka akun anda di http://fbsindonesia.co.id
    -----------------
    Jika membutuhkan bantuan hubungi kami melalui

    Tlp : 085364558922
    BBM : D04A8185

    ReplyDelete
  11. wah membantu sekali. ditunggu kak postingan selanjutnya

    ReplyDelete
  12. terima kasih buat materinya..
    sangat bermanfaat.

    ReplyDelete
  13. http://localhost/web/index.php
    username dan password yg di masukkan apa ya gan ???

    ReplyDelete
    Replies
    1. cek di sini gan http://banuaril10.blogspot.co.id/2015/07/cara-membuat-web-dinamis.html

      Delete
  14. sangat membantu dan artikel nya juga mudah dipahami,,,

    ReplyDelete
  15. gan tolong kirim koding lengkap nya ke edotelok12@gmail.com
    thx gan

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. terimakasih banyak artikelnya sangat berguna..
    My blog

    ReplyDelete
  19. hai kak banu,
    thanks banget yaa,
    maaf nie,q masih copas copas file mu,soalnya q masih tahap blajar

    ReplyDelete
  20. Error 404

    localhost
    Apache/2.4.7 (Win32) OpenSSL/1.0.1e PHP/5.5.6

    ReplyDelete
  21. Bagus ini mas, kususnya buat mereka yang masih belajar... terima dan kasih :)

    ReplyDelete
  22. artikel yang bisa dengan mudah dipahami
    My blog

    ReplyDelete
  23. Terimakasih.. tulisannya sangat bermanfaat..
    My blog

    ReplyDelete
  24. sangat mudah dipahami trimaksih sudah berbagi
    dwi ayu lestari

    ReplyDelete

Search This Blog

Follow This Blog

Total Pageviews