Loading...
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tutorial Membuat Crud dengan PHP dan MySQL

11/19/2016 Add Comment
Membuat Crud atau Simpan, Edit, Hapus denan PHP dan MySQL - Latihan Webmaster Bagian II, latiaha php mysql, dasar php, dasar mysql, kelas online belajar php, membuat simpan hapus eidt, latiahan dasar

Pada Latihan sebelumnya kita sudah berhasil membuat layout seperti gambar di bawah ini. Saya ucapkan selamat buat kamu yang sudah berhasil.

Jika kamu belum berhasil silahkan pelajari terlebih dahulu latiahan sebelumnya


Membuat Crud atau Simpan, Edit, Hapus denan PHP dan MySQL - Latihan Webmaster Bagian II, latiaha php mysql, dasar php, dasar mysql, kelas online belajar php, membuat simpan hapus eidt, latiahan dasar

Pada Latihan Webmaster Bagian II ini, kita akan belajar membuat pengolahan data sederhana dengan menggunakan database MySQL.

Kita tidak membuat latihan ini dari awal, kita akan memodifikasi latihan sebelumnya dengan mengolah data tabel siswa (sebagai latihan).

Dalam latihan ini, kita mengolah tabel siswa dengan fungsi CRUD (create, reat, update, delete) atau simpan, baca data, perbarui data, dan menghapus data.



Baik, mari langsung kita eksekusi sekarang juga.

1. Membuat Database

Buatlah database dengan nama t_siswa, dengan atribut siswa_nis, siswa_nama, siswa_alamat, siswa_hp. Perhatikan gamabr berikut ini.

Membuat Crud atau Simpan, Edit, Hapus denan PHP dan MySQL - Latihan Webmaster Bagian II, latiaha php mysql, dasar php, dasar mysql, kelas online belajar php, membuat simpan hapus eidt, latiahan dasar

Buat siswa_nis sebagai auto_increment dalam latihan kali ini.

Jika anda belum faham cara membuat database berikut ini silahkan saksikan latihan sebelumnya.


2. Buat Folder Modul

Merujuk pada latihan sebelumnya, kita meletakkan file latihan kita pada folder 1, nah... saat ini kita meletakkan file latihan pada folder 2, (copy paste saja folder 1, lalu rename atau ubah nama folder menjadi 2)  lihatlah pada lingkaran hitam.

Tambahkan folder dengan nama "modul", perlu di ingat dalam latihan ini kamu tidak perlu memodifikasi file lainnya. ikuti petunjuk latihan ini saja.

Setiap tabel yang kita olah nantinya akan terletai pada modul, semakin banyak tabel yang akan di olah maka isi di didalam folder modul juga semakin banyak.

Membuat Crud atau Simpan, Edit, Hapus denan PHP dan MySQL - Latihan Webmaster Bagian II, latiaha php mysql, dasar php, dasar mysql, kelas online belajar php, membuat simpan hapus eidt, latiahan dasar

3. Buat Folder Siswa

Didalam folder modul, buat 1 folder lagi dengan nama "siswa", di dalam folder siswa kita buat dua file PHP dengan nama siswa.php dan aksi_siswa.php.

siswa.php

 <!DOCTYPE html>  
 <head>  
      <title>Data Dunatur</title>  
 </head>  
 <html lang="en">  
 <?php  
 $aksi = "modul/siswa/aksi_siswa.php?page=siswa";  
 $link_edit ="?page=siswa&mod=edit";  
 $link_hapus = $aksi."&act=hapus";  
 switch($_GET['mod']){  
      default:   
           echo "  
           <p>Data Siswa</p>  
           <table border ='1'>  
           <a href='?page=siswa&mod=add'>Tambah Data </a>  
           <thead>  
                <tr>  
                     <th>No</th>  
                     <th>Nama siswa</th>  
                     <th>Alamat</th>  
                     <th>HP</th>  
                     <th>Aksi</th>  
                </tr>  
           </thead>  
           <tbody>";  
           $no = 1;  
           $query = mysql_query("select * from t_siswa");  
           while ($data = mysql_fetch_array($query)){  
           echo "<tr>  
                     <td>$no</td>  
                     <td>$data[siswa_nama]</td>  
                     <td>$data[siswa_alamat]</td>  
                     <td>$data[siswa_hp]</td>  
                     <td>  
                          <a href='$link_edit&id=$data[siswa_nis]'> Edit</a>  
                          <a onclick='return konfirmasi_hapus()' href='$link_hapus&id=$data[siswa_nis]'> Hapus</a>  
                     </td>  
           </tr>";  
           $no++;}  
           echo "</tbody></table>";  
      break;  
 case "add":  
 echo "  
 <p>Tambah Data Siswa</p>  
 <form action='$aksi&act=input' method='post'>  
 <table>  
 <tr>  
 <td>Nama</td>  
 <td>:</td>  
 <td><input type='text' name='siswa_nama' maxlength='16' /></td>  
 </tr>  
 <tr>  
 <td>Alamat</td>  
 <td>:</td>  
 <td><textarea name='siswa_alamat'></textarea></td>  
 </tr>  
 <tr>  
 <td>HP</td>  
 <td>:</td>  
 <td><input type='text' name='siswa_hp' maxlength='20' /></td>  
 </tr>  
 </br>  
 <tr>  
      <td></td>  
      <td></td>  
      <td>     <input type='submit' value='simpan'>  
                <input type='reset' value='Reset'>  
      </td>  
 </tr>  
 </table>  
 </form>  
 ";  
      break;  
 case "edit":  
 $sql_edit =mysql_query("select * from t_siswa where siswa_nis='$_GET[id]'");  
 $data=mysql_fetch_array($sql_edit);  
 echo "  
 <p>Edit Data Siswa</p>  
 <form action='$aksi&act=update' method='post'>  
 <table>  
 <tr>  
 <td>NIS</td>  
 <td>:</td>  
 <td><input type='text' name='siswa_nis' value='$data[siswa_nis]' readonly='true'/></td>  
 </tr>  
 <tr>  
 <td>Nama </td>  
 <td>:</td>  
 <td><input type='text' name='siswa_nama' value='$data[siswa_nama]'/></td>  
 </tr>  
 <tr>  
 <td>Alamat</td>  
 <td>:</td>  
 <td><textarea name='siswa_alamat'>$data[siswa_alamat]</textarea></td>  
 </tr>  
 <tr>  
 <td>HP</td>  
 <td>:</td>  
 <td><input type='text' name='siswa_hp' value='$data[siswa_hp]' /></td>  
 </tr>  
 <tr>  
      <td></td>  
      <td></td>  
      <td><input type='submit' value='Perbarui'>  
      <a href='?page=siswa' value='Kembali'> Kembali</a></td>  
 </tr>  
 </table>  
 </form>  
 ";  
 //end switch  
 }  
 ?>  
 <script type="text/javascript" language="JavaScript">  
  function konfirmasi_hapus()  
  {  
  tanya = confirm("Anda Yakin Akan Menghapus Data ?");  
  if (tanya == true) return true;  
  else return false;  
  }</script>  
 </html>  

aksi_siswa.php


 <?php  
 mysql_connect("localhost","root","");  
 mysql_select_db("db_belajar");  
 if($_GET['page'] == 'siswa' AND $_GET['act'] == 'hapus'){  
 mysql_query("DELETE FROM t_siswa WHERE siswa_nis = '$_GET[id]'");  
 echo "<script>alert('Data berhasil di hapus');window.location.assign('../../index.php?page=siswa');</script>";  
 }  
 elseif($_GET['page'] == 'siswa' AND $_GET['act'] == 'input'){  
      mysql_query(" INSERT INTO t_siswa (siswa_nama,siswa_alamat,siswa_hp)  
      VALUE('$_POST[siswa_nama]','$_POST[siswa_alamat]','$_POST[siswa_hp]')  
           ");  
 echo "<script>alert('Data berhasil di simpan');window.location.assign('../../index.php?page=siswa');</script>";  
 }  
 elseif($_GET['page'] == 'siswa' AND $_GET['act'] == 'update'){  
      mysql_query("  
      UPDATE t_siswa SET      siswa_nama          =     '$_POST[siswa_nama]',  
                               siswa_alamat     =     '$_POST[siswa_alamat]',  
                               siswa_hp          =     '$_POST[siswa_hp]'  
                               WHERE siswa_nis =     '$_POST[siswa_nis]' ");  
 echo "  
 <script>  
      alert('Data berhasil di perbarui');  
      window.location.assign('../../index.php?page=siswa&mod=edit&id=$_POST[siswa_nis]');  
 </script>";  
 }  
 ?>  

4. Modifikasi File Index.php

Modifikasi file  index dengan menambahkan menu "Siswa", hasil meodifikasi selengkapnya akan seperti code di bawah ini.

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title> Belajar Layout </title>  
 <link rel="stylesheet" href="css/style.css" />  
 </head>  
 <body>  
 <div id="header">  
 <?php include "header.php" ?>  
 </div>  
 <div id="nav">  
 <a href="?page=profil">      Profil           <br> </a>  
 <a href="?page=biodata">      Biodata      <br> </a>  
 <a href="?page=siswa">   Siswa      <br> </a>  
 Foto           <br>  
 Moto Hidup  
 </div>  
 <div id="section">  
 <?php include "content.php" ?>  
 </div>  
 <div id="footer">  
 Karya Saya : Fulan Tarigan | Alamat : Bukit Cendol Gg.Flash Disk  
 </div>  
 </body>  
 </html>  




5. Modifikasi File Content.php

Di sini kita menambahkan link siswa, dan koneksi database

 <?php  
 //koneksi database  
 mysql_connect("localhost","root","");  
 mysql_select_db("db_belajar");  
 if($_GET['page'] == 'profil'){  
      include "profil.php";  
 }  
 elseif($_GET['page'] == 'biodata'){  
      include "biodata.php";  
 }  
 elseif($_GET['page'] == 'siswa'){  
      include "modul/siswa/siswa.php";  
 }  
 ?>  

Tutorial Css - Cara Membuat Tombol Cantik Dengan CSS

9/25/2016 2 Comments
Cara Membuat Button Cantik Dengan CSS. Berikut ini salah satu contoh penggunaan CSS untuk mempercantik Button atau tombol pada halaman HTML kamu.

Ini merupakan dasar dari penggunaan CSS pada button, kamu dapat memodifikasi dan mengatur sesuai dengan selera yang di inginkan.

Untuk lebih memahami script ini, kamu harus memperhatikan class yang digunakan setiap tombol yang ada, setiap tombol memiliki class yang berbeda dan menghasilkan warna yang berbeda pula

Sedangkan isi dari class telah di set sebelumnya dalam tag di dalam tag itulah CSS dapat aktif dan memberikan hasil pada button sesuai dengan class yang di atur di dalamnya.



Silahkan gunakan Script berikut ini untuk membuat button cantik seperti diatas, lihat hasilnya. anda dapat mempraktekkannya langsung di W3SCHOOLS.

 <!DOCTYPE html>  
 <html>  
 <head>  
 <style>  
 .button {  
   background-color: #4CAF50; /* Green */  
   border: none;  
   color: white;  
   padding: 15px 32px;  
   text-align: center;  
   text-decoration: none;  
   display: inline-block;  
   font-size: 16px;  
   margin: 4px 2px;  
   cursor: pointer;  
 }



 .button2 {background-color: #008CBA;} /* Blue */  
 .button3 {background-color: #f44336;} /* Red */  
 .button4 {background-color: #e7e7e7; color: black;} /* Gray */  
 .button5 {background-color: #555555;} /* Black */  
 </style>  
 </head>  
 <body>  
 <h2>Button Colors</h2>  
 <p>Change the background color of a button with the background-color property:</p>  
 <button class="button">Green</button>  
 <button class="button button2">Blue</button>  
 <button class="button button3">Red</button>  
 <button class="button button4">Gray</button>  
 <button class="button button5">Black</button>  
 </body>  
 </html>  

Ada sebagian orang yang tidak memahami konsep dasar CSS ini, hasilnya ia akan sangat sulit untuk mengembangkan sebuah halaman sesuai dengan yang di inginkan.


Membuat Layout Web Sederhana Dengan CSS

3/13/2016


[rpmadani.com] Belajar membuat layout sederhana mengunakan CSS, ini merupakan cara sederhana bai pemula untuk memahami dasar HTML dan CSS.

Pada tutorial ini saya mengambil materi dari modul kursus yang saya buat pada paket kursus pemograman wab master di rumah pintar madani.

Jika sobat ingin belajar bersama saya langsung, silahkan bergabung di rumah pintar madnai untuk mengikuti kursus regulernya,

Jika ada pertanyaan dan masukkan silahak tulis dikolom komerntar. Selamat belajar online....!!!

A. Mengenal Layout


Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu,.

Sederhananya layout di ibaratkan sebagai rancangan awal yang akan digunakan sebagai dasar suatu website. Secara umum layout sebuah website terdiri dari Header, Menu, Content, Footer.

Berikut beberapa contoh layout yang sering digunkan pada sebuah website :

Membuat Layout Sederhana Pada Website Dengan CSS, belajar buat website dasar, html dasar, langah-langkah membuat web, contoh web sederhana, tutorial css dasar, belajar layout css

Dalam penerapanya sebuah website ada yang memiliki satu kolom content, dua kolom, dan tiga kolom content, sudah tidak sabar ingin mencoba membuatnya ?

Mari kita mulai langsung membuat Layout Website dengan 2 Kolom, dimana kolom pertama sebagai menu dan kolom ke dua sebagai isi content dari website.



B.Membuat Layout Sederhana dengan CSS

Ikuti langkah-langkah berikut ini satu persatu, dan pastikan tidak ada kesalahan penulisan. Kita akan membuat layout dengan scipt PHP dan CSS.

Buatlah Folder Baru dengan nama "belajar" didalam folder htdocs anda, kemudian buat folder dengan nama "1" sebagai tanda bahwa ini adalah latihan 1 (satu) dari pembelajran kita.

Hasil Akhirnya akan seperti gambar di bawah ini, fokuslah pada lingkaran merah dan isi di dalam folder 1 tersebut. Di dalam folder 1 berisi 2 folder dengan nama "css" dan "foto" di tambah 5 File PHP.

Sebelum melanjutkan sebaiknya buat terlebih dahulu rangkaian folder di bawah ini, agar lebih mudah.

Membuat Layout Sederhana Pada Website Dengan CSS, belajar buat website dasar, html dasar, langah-langkah membuat web, contoh web sederhana, tutorial css dasar, belajar layout css

Kemudian tulislah script CSS berikut ini, lalu simpan script CSS tersebut dengan nama style.css, dan simpan di dalam folder CSS.


 #header {  
   background-color:#3F72A5;  
   color:white;  
   text-align:center;  
   padding:5px;  
 }  
 #nav {  
   line-height:30px;  
   background-color:#eeeeee;  
   height:500px;  
   width:150px;  
   float:left;  
   padding:15px;          
 }  
 #section {  
   width:350px;  
   float:left;  
   padding:10px;              
 }  
 #footer {  
   background-color:#3F72A5;  
   color:white;  
   clear:both;  
   text-align:center;  
   padding:5px;              
 }  

Tulis Script PHP berikut ini dan simpan dengan nama index.php

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title> Belajar Layout </title>  
 <link rel="stylesheet" href="css/style.css" />  
 </head>  
 <body>  
 <div id="header">  
 <?php include "header.php" ?>  
 </div>  
 <div id="nav">  
 <a href="?page=profil">      Profil           <br> </a>  
 <a href="?page=biodata">      Biodata      <br> </a>  
 Foto           <br>  
 Moto Hidup  
 </div>  
 <div id="section">  
 <?php include "content.php" ?>  
 </div>  
 <div id="footer">  
 Karya Saya : Fulan Tarigan | Alamat : Bukit Cendol Gg.Flash Disk  
 </div>  
 </body>  
 </html>  


Tulis Script PHP berikut ini dan simpan dengan nama header.php

 <h1>Biodata : </h1>  

Tulis Script PHP berikut ini dan simpan dengan nama content.php

 <?php  
 if($_GET['page'] == 'profil'){  
      include "profil.php";  
 }  
 elseif($_GET['page'] == 'biodata'){  
      include "biodata.php";  
 }  
 ?>  

Tulis Script PHP berikut ini dan simpan dengan nama profil.php

 <!DOCTYPE html>  
 <html>  
 <h2>Profil</h2>  
 <img src="foto/fulan.jpg" style="height=232px" width="200px"><br>  
 Nama Saya Fulan Tarigan ..... Bla Bla Bla....  
 </html>  

Tulis Script PHP berikut ini dan simpan dengan nama biodata.php

 <!DOCTYPE html>  
 <html>  
 <h2>Biodata</h2>  
 <p>Berikut Ini Biodata Saya :</p>  
 </html>

Buat Folder baru dengan nama foto, jika sudah di buat silahkan isi dengan sebuah gambar dengan nama fulan.jpg. 

Setelah anda mengisi foto pastikan didalam folder Layout anda memiliki struktur file seperti gamabr dibawah ini.

Membuat Layout Sederhana Pada Website Dengan CSS, belajar buat website dasar, html dasar, langah-langkah membuat web, contoh web sederhana, tutorial css dasar, belajar layout css


Jika sudah sesuai dengan gambar di atas, silahkan jalankan program melalui browser kesayangan anda dengan meng akses link berikut :
http://localhost/belajar/1


Demikian Pembelajarn membuat layout dengan CSS Sederhana, jika ada kendala silahkan tulis di kolom komentar.



Saya akan membantu teman-teman semua. semoga bermanfaat, dan hasil akhir nya akan tampak seperti gambar di bawah ini.

Membuat Layout Sederhana Pada Website Dengan CSS


Jika sudah berhasil silahkan lanjutkan ke latihan selanjutnya.
Baca : Latiahan Web Master Bagian II