Minggu, 08 Oktober 2017

Membuat Login Sederhana dengan Php dan Mysql

           Pada postingan sebelumnya adin telah membahas bagaimana cara mengkoneksikan php ke database mysql, nah pada postingan kali ini mimin ingin menulis bagaimana cara membuat login sederhana dengan php dan Mysql.

  1. pertama yang kita lakukan adalah mengisi tabel user yang telah kita siapin sebelumnya, tepatnya pada postingan saya sebelumnya:
  2. kemudian kita buat folder admin yang tersimpan di praktikum/admin:
  3. setelah membuat folder admin sekarang saat membuat koding dengan format php dan disimpan di dalam folder admin, yang pertama koding untuk login.php:
<?php
session_start();
require_once('../conn/conn.php');
if(isset($_POST['login'])){
$unm = $_POST['user'];
$ups = md5($_POST['pass']);
$sql = "SELECT * FROM user WHERE username='".$unm."' AND password='".$ups."'";
$result   = $conn->query($sql);

if ($result->num_rows > 0){
$_SESSION['user'] = $unm;
header('location: index.php');
    }else{echo "GAGAL LOGIN";}
}
?>
<!doctype html>
<html>
<head>
<title>praktikum</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale">
<link rel="stylesheet" href="../asset/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-offset-4 col-lg-offset-4">
<div class="account-wall">
<h1 clas="text-centre login-title">HALAMAN ADMIN</h1>
<form class="form-signin" method="post">
<input type="text" name="user" class="form-control" placeholder="Username" required autofocus>
<input type="password" name="pass" class="form-control" placeholder="password" required>
<input type="submit" name="login" class="btn btn-primary btn-block" value="Masuk">
</form>
</div>
</div>
</div>
</div>
<script src="../asset/js/jquery.min.js"></script>
<script src="../asset/js/bootstrap.min.js"></script>
</body>
</html>

                kebetulan untuk menulis koding tersebut saya gunakan Sublime text:

            kemudian kita membuat koding untuk logout seperti dibawah ini:

<?php
session_start();

if(session_destroy()) {

header("location: ../index.php");

}

?>

          dan yang terakhir koding index:

<?php
session_start();
if(empty($_SESSION['user'])){
echo '
<script language="javascript">
document.location=" login.php";
</script>';

}else{
echo 'SELAMAT DATANG : '. $_SESSION['user'];
}

?>

       Setelah kita menulis semua koding dan menyimpannya di folder admin yang telah kita siapkan sebelumnya, selanjutnya kita akan coba lihat di localhost:
       Jika berhasil masuk maka akan keluar tulisan sesuai dengan koding yang kita buat sebelumnya:
        Demikianlah langkah-langkah membuat login sederhana dengan php dan sederhana, jangan lupa tinggalkan saran dan komentarnya......

Cara Mengkoneksikan Php ke Database MySql

           Pada postingan sebelumnya, saya telah membahas bagaimana cara membuat Website sederhana. Un tuk membuat menu login pada halaman Web, maka kita bisa menggunakan perintah Php untuk mengkoneksikannya ke dalam database mysql kita. Berikut beberapa langkah cara mengkoneksikan php ke database Mysql:
            pertama yang harus kita lakukan adalah create database yang baru pada mysql dan beri nama sesuai kebutuhan, seperti pada gambar:

             kemudian setelah berhasil create database, selanjutnya kita membuat table user pada database praktikum yang telah kita buat sebelumnya:

            selanjutnya kita mengisi attribute user sesuai kebutuhan, seperti contoh:

          dalam hal ini saya gunakan id_user sebagai primary key.

       kemudian kita masukan coding yang akan mengkoneksikan php ke database mysql, berikut coding yang kita gunakan:

           <?php

           $servername = "localhost";
           $username = "root";
           $password = "";
           $dbname = "praktikum";
           $conn = new mysqli($servername, $username, $password, $dbname);

           if ($conn->connect_error) {
       die("Koneksi Gagal: " . $conn->connect_error);
           }else{
       echo "Koneksi Sukses";
           }


           ?>

         catatan: jangan lupa untuk membuat folder yang berada di  dalam file praktikum untuk menyimpan file coding yang kita tulis di atas dengan format php

           

          setelah selesai semua, sekarang bisa di coba di localhost/praktikum/conn/conn.php sesuai dengan tempat kita menyimpan file coding yang kita ketik tadi, jika berhasil maka akan muncul koneksi berhasil sesuai dengan coding yang kita tulis dalam perintah: 

        
Demikianlah contoh cara mengkoneksikan php ke database mysql, semoga bermanfaat dan jangan lupa komnentar dan sarannya di kolom bawah ini, terimakasih..........

Minggu, 01 Oktober 2017

Membuat Website dengan Menggunakan Framework

MEMBUAT HALAMAN WEB SEDERHANA DENGAN MENGGUNAKAN FRAMEWORK BOOTSTRAP

Untuk membuat Website dengan famework kita harus memilih terlebih dahulu framework apa yang akan kita gunakan, kebetulan saya akan menggunakan framework Bootstrap, dan Pada pembahasan sebelumnya saya telah membahas tentang cara penggunaan bootstrap, bisa di lihat di link berikut: http://heridzulkarnain.blogspot.co.id/2017/10/framework.html

oke, setelah mengerti langkah-langkah yang sudah tercantum di pembahasan saya sebelumnya, kemudian kita bermain-main dengan coding (assseeekkk)

  1. pertama-tama buat scrip seperti gambar di bawah
                           agar website responsive terhadap perangkat mobile Untuk memastikan render yang tepat dan sentuhan zooming, tambahkan berikut <meta> tag dalam<head> elemen:
  •  meta tag sendiri adalah rangkaian kode HTML yang biasa digunakan untuk mempermudah Google dan browser untuk mengidentifikasi seluruh konten yang ada dalam website tersebut.
  •  meta charset="utf-8" Universal Character Set, atau yang umum disebut sebagai Charset adalah kumpulan dari beberapa jenis pengkodean karakter baik huruf, angka, symbol, dll. Untuk untuk saat ini pengkodean UTF-8 telah menjadi standarisasi untuk pengkodean dalam system operasi, bahasa pemrograman, API, dan software.
  • width=device-width Bagian menetapkan lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada perangkat).
  • initial-scale=1 bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.
      2.kemudian buat perintah seperti berikut:

     3. Hasilnya seperti gambar berikut:

      4. Setelah itu kita membuat perintah yang akan kita tampilkan pada tampilan web, misalnya                   dengan perintah berikut ini:


        5. dan berikut hasilnya
  
Demikian lah tutorial pembuatan website, semoga dapat bermanfaat buat kita semua, jangan lupa tinggalkan komentar dan sarannya di bawah, sekian dan terima kasih.......

FRAMEWORK

Framework atau bahasa indonesianya kerangka kerja adalah sebuah software untuk memudahkan para programmer membuat aplikasi atau web yang isinya adalah berbagai fungsi, plugin, dan konsep sehingga membentuk suatu sistem tertentu. Dengan menggunakan framework, sebuah aplikasi akan tersusun dan terstruktur dengan rapi. Dan kali ini saya akan menggunakan aplikasi Bootstrap dan Jquery.

Bootstrap
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Kita bisa memantau perkembangan proyek Bootstrap dan mendownload Bootstrap di web resminya getbootstrap.com dan Githubnya di https://github.com/twbs/bootstrap.
      
      1.      Download terlebih dahulu aplikasi Bootstrap pada alamat website yang tertera di atas, dan setelah selesai mendownload maka kita akan mendapatkan sebuah file dalam bentuk zip. Atau untuk menghemat kuota anda bisa memintanya kepada teman anda (hehe)

      2.      Extrak file bootsrap tersebut, sehingga file nya menjadi folder biasa.



      3.      Kemudian letakan di folder xampp yang sebelumnya telah anda punya, tepatnya di folder : xampp>htdocs>praktikum>asset (folder ini merupakan folder yang saya buat dan berisikan tentang web sederhana yang saya buat)
     
      4.    Kemudian buat sebuah file dan beri nama index.php, dan pastikan file tersebut di letakan di folder dimana anda menyimpan folder bootstrap tadi (karna saya meletakkannya di folder praktikum yang berada di dlaam folder xampp tadi maka saya harus meletakkan file tersebut ke folder praktikum), dan kemudia kita bermain dengan coding seperti gambar di bawah ini:

Ada beberapa hal yang perlu di perhatikan dalam peng-codingan di atas:

            a) Pastikan link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS                              Bootstrap berada, relative terhadap file html yang memanggilnya.

    Karena  file index.php yang kita buat berada di dalam folder praktikum dan di dalamnya      langsung bersisi file Bootstrap, maka kita tulis asset/css/bootstrap.min.css.

b) Pastikan juga script JavaScript Bootstrap mengarah pada path yang tepat dimana file         JavaScript Bootstrap berada, relative terhadap file html yang memanggilnya. 



NOTE: Karena pada contoh kita, file index.php yang kita buat di dalam      folder praktikum dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis asset/js/bootstrap.min.js. Jika nanti kamu membuat file index.php nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

c)  Pastikan JQuery terpanggil



NOTE: Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari library-nya.

Demikianlah tutorial yang saya praktekkan, silahkan tinggalkan komentar dan sarannya dibawah, sekian dan terimakasih......