Jumat, 08 Desember 2017

Membuat Navbar pada HTML dan CSS

Membuat Navbar pada HTML dan CSS



Hallo semua, kali ini Kami akan membuat sebuah tutorial untuk membuat navbar sederhana pada HTML dan CSS. Sebelumnya, Kamu harus paham dulu konsep dari HTML itu sendiri. Kamu bisa membaca artikel Konsep Dasar HTML.
HTML memiliki beberapa element, salah satunya yaitu <nav>. Nav adalah element pada HTML yang dibuat untuk mempresentasikan link navigasi. Bisa dibilang, nav adalah wadah dari link yang akan men direct kita ke halaman lain. Tetapi link yang berada pada element <nav> biasanya adalah link major yang merujuk kepada halaman lain pada website kita. Misalkan menunjukan link halaman utama,gallery dll.
Pada pengetikan sintaks kita dapat menggunakan berbagai macam code editor, misalkan Notepad++ atau Sublime. Pemilihan code editor bisa bebas sesuai dengan yang kita inginkan.

Implementasi

Berikut adalah contoh sederhana penulisan kode HTML untuk navigation bar.
<nav>
 <a href="/home/">Halaman Utama</a> |
 <a href="/gallery/">Gallery</a> |
 <a href="/contact/">Contact Us</a> |
</nav>
Berikut adalah contoh lain dari pembuatan nav pada HTML: 

Membuat Navbar dengan menambahkan CSS

Setelah Kita selesai mencoba membuat navbar sederhana, Kita dapat menambahkan CSS untuk membuat navbar lebih bagus dan enak dilihat. Kalian bisa membaca lebih lanjut tentang CSS pada artikel Pengenalan dan Sintaks Dasar CSS.
Berikut Contoh Penggunaan Nav dengan ditambahkan CSS
Berikut adalah kode untuk menampilkan navbar seperti gambar di atas:
Penjelasan:
display: block; Digunakan untuk membuat display link menjadi sebuah bentuk.
:hover pada CSS maksudnya adalah action yang kita buat pada selector hover akan berjalan saat cursor kita diarahkan pada object tersebut.
display: inline-table; Berfungsi untuk membuat object sejajar dengan object lainnya.

Pembuatan Dropdown Pada Nav

Setelah membuat navbar yang sederhana, sekarang Kita akan mencoba menambahkan fitur dropdown pada navbar. Dropdown adalah fitur dimana saat Kita menggerakan mouse kepada link nav tersebut, akan muncul daftar - daftar link lain yang terdapat didalam link pertama.
Screenshot_10
Berikut adalah kode programnya: 

Bagaimana Dropdown bisa terjadi ?

Karena saat pertama dijalankan, CSS pada selector nav ul ul ber-display none. Dan pada saat kita hover akan berubah menjadi block. Perubahan tersebut akan memunculkan konten nav ul ul saat kita hover. Dan ditambahkan property-property lain agar rapih.
Demikianlah tutorial yang bisa Kami share kali ini, semoga tutorial kali ini bermanfaat untuk kedepannya. Semoga wawasan kalian tentang HTML dan CSS bertambah. Janganlah berhenti belajar karena hidup tak pernah berhenti mengajarkan.


Tutorial Membuat CRUD PHP Dengan MySQL

Tutorial Membuat CRUD PHP Dengan MySQL


CRUD adalah akronim untuk Create, Read, Update, dan Delete. Operasi CRUD adalah manipulasi data dasar untuk database. Dalam tutorial ini kita akan membuat aplikasi PHP sederhana untuk melakukan semua operasi ini pada tabel database MySQL di satu tempat.
Kita akan membuat sebuah aplikasi dengan tampilan seperti pada gambar di bawah dengan sebuah tabel yang menampilkan data dari database di sisi frontend. Terdapat beberapa tombol untuk mengubah data yang ada di database lewat antarmuka yang kita buat. Tabel pengguna yang kita buat akan berisi informasi pengguna seperti nama, nomor telepon, email, dll.

Langkah-Langkah Pembuatan CRUD

1. Membuat Database.sql

/* Create Database and Table */
create database crud_db;
 
use crud_db;
 
CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(100),
  `email` varchar(100),
  `mobile` varchar(15),
  PRIMARY KEY  (`id`)
);

Pertama kita buat terlebih dahulu file database.sql kemudian kita impor file 'database.sql' ini ke dalam database (menggunakan PHPMyAdmin).

2. Membuat file config.php

<?php
/**
 * using mysqli_connect for database connection
 */
 
$databaseHost = 'localhost';
$databaseName = 'crud_db';
$databaseUsername = 'root';
$databasePassword = '';
 
$mysqli = mysqli_connect($databaseHost, $databaseUsername, $databasePassword, $databaseName); 
 
?>
File config.php menyimpan informasi tentang database host, username dan password. Sebagian besar server lokal bekerja dengan detail yang diberikan. Anda dapat mengubahnya sesuai dengan detail host dan database Anda.
Untuk menghubungkan PHP dengan MySQL, kita menggunakan fungsi mysqli_connect() dengan alamat server sebagai parameter pertama, user database sebagai parameter kedua, password user sebagai parameter ketiga, dan nama database sebagai parameter keempat.
Silahkan isi password sesuai dengan yang dibuat di servernya. Jika tidak menggunakan passsword, maka isikan dengan String kosong saja.
$password = "";

3. Membuat file index.php

<?php
// Create database connection using config file
include_once("config.php");
 
// Fetch all users data from database
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
?>
 
<html>
<head>    
    <title>Homepage</title>
</head>
 
<body>
<a href="add.php">Add New User</a><br/><br/>
 
    <table width='80%' border=1>
 
    <tr>
        <th>Name</th> <th>Mobile</th> <th>Email</th> <th>Update</th>
    </tr>
    <?php  
    while($user_data = mysqli_fetch_array($result)) {         
        echo "<tr>";
        echo "<td>".$user_data['name']."</td>";
        echo "<td>".$user_data['mobile']."</td>";
        echo "<td>".$user_data['email']."</td>";    
        echo "<td><a href='edit.php?id=$user_data[id]'>Edit</a> | <a href='delete.php?id=$user_data[id]'>Delete</a></td></tr>";        
    }
    ?>
    </table>
</body>
</html>
File index.php merupakan file utama yang menyertakan file konfigurasi untuk koneksi database. Kemudian menampilkan semua daftar pengguna menggunakan MySQL Select Query. Pengguna yang akan ditampilkan di dalam daftar perlu menambahkan terlebih dahulu menggunakan tautan 'Tambahkan Pengguna Baru'.

4. Membuat file add.php


<html>
<head>
 <title>Add Users</title>
</head>
 
<body>
 <a href="index.php">Go to Home</a>
 <br/><br/>
 
 <form action="add.php" method="post" name="form1">
  <table width="25%" border="0">
   <tr> 
    <td>Name</td>
    <td><input type="text" name="name"></td>
   </tr>
   <tr> 
    <td>Email</td>
    <td><input type="text" name="email"></td>
   </tr>
   <tr> 
    <td>Mobile</td>
    <td><input type="text" name="mobile"></td>
   </tr>
   <tr> 
    <td></td>
    <td><input type="submit" name="Submit" value="Add"></td>
   </tr>
  </table>
 </form>
 
 <?php
 
 // Check If form submitted, insert form data into users table.
 if(isset($_POST['Submit'])) {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $mobile = $_POST['mobile'];
  
  // include database connection file
  include_once("config.php");
    
  // Insert user data into table
  $result = mysqli_query($mysqli, "INSERT INTO users(name,email,mobile) VALUES('$name','$email','$mobile')");
  
  // Show message when user added
  echo "User added successfully. <a href='index.php'>View Users</a>";
 }
 ?>
</body>
</html>
File add.php berfungsi untuk menambahkan pengguna baru. Formulir HTML digunakan untuk menerima masukan data pengguna. Setelah data pengguna diserahkan, MySQL INSERT Query digunakan untuk memasukkan data pengguna ke dalam database.

5. Membuat file edit.php

<?php
// include database connection file
include_once("config.php");
 
// Check if form is submitted for user update, then redirect to homepage after update
if(isset($_POST['update']))
{ 
 $id = $_POST['id'];
 
 $name=$_POST['name'];
 $mobile=$_POST['mobile'];
 $email=$_POST['email'];
  
 // update user data
 $result = mysqli_query($mysqli, "UPDATE users SET name='$name',email='$email',mobile='$mobile' WHERE id=$id");
 
 // Redirect to homepage to display updated user in list
 header("Location: index.php");
}
?>
<?php
// Display selected user data based on id
// Getting id from url
$id = $_GET['id'];
 
// Fetech user data based on id
$result = mysqli_query($mysqli, "SELECT * FROM users WHERE id=$id");
 
while($user_data = mysqli_fetch_array($result))
{
 $name = $user_data['name'];
 $email = $user_data['email'];
 $mobile = $user_data['mobile'];
}
?>
<html>
<head> 
 <title>Edit User Data</title>
</head>
 
<body>
 <a href="index.php">Home</a>
 <br/><br/>
 
 <form name="update_user" method="post" action="edit.php">
  <table border="0">
   <tr> 
    <td>Name</td>
    <td><input type="text" name="name" value=<?php echo $name;?>></td>
   </tr>
   <tr> 
    <td>Email</td>
    <td><input type="text" name="email" value=<?php echo $email;?>></td>
   </tr>
   <tr> 
    <td>Mobile</td>
    <td><input type="text" name="mobile" value=<?php echo $mobile;?>></td>
   </tr>
   <tr>
    <td><input type="hidden" name="id" value=<?php echo $_GET['id'];?>></td>
    <td><input type="submit" name="update" value="Update"></td>
   </tr>
  </table>
 </form>
</body>
</html>
Edit.php digunakan untuk mengedit / update data pengguna. Anda dapat mengubah data pengguna dan memperbaruinya. File ini akan mengarahkan pengguna kembali ke homepage, setelah update sukses.

6. Membuat file delete.php

<?php
// include database connection file
include_once("config.php");
 
// Get id from URL to delete that user
$id = $_GET['id'];
 
// Delete user row from table based on given id
$result = mysqli_query($mysqli, "DELETE FROM users WHERE id=$id");
 
// After delete redirect to Home, so that latest user list will be displayed.
header("Location:index.php");
?>

File delete.php hanya dipanggil saat kita klik link 'Delete' untuk pengguna manapun yang dipilih.