F 2018 ~ Blog Pembelajaran

Autentikasi Pengguna (Login)

Assamu'alaikum...

Pada artikel kali ini, saya akan melanjutkan dari artikel sebelumnya Connection Database

1. Mengisi Table User

2. Membuat Folder Admin
3. Admin/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);
//SUCCESS
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=1">
<link rel="stylesheet" href="../asset/css/bootstrap.min.css"><!-- CSS Bootstrap -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 col-lg-offset-4">
<div class="account-wall">
<h1 class="text-center 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-dark btn-block" value="Masuk">
</form>
</div>
</div>
</div>
</div>
<script src="../asset/js/jquery.min.js"></script><!--Latest compiled JavaScript -->
<script src="../asset/js/bootstrap.min.js"></script><!-- jQuery library -->
</body>
</html>

4. Admin/logout.php
<?php
session_start();
// Menghapus Sessions
if(session_destroy()) {
// Langsung mengarah ke Home index.php
header("location:../admin/index.php");

}

?>

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

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

?>
-Tampilan-

-Tampilan-
Sekian,
Wassalamu'alaikum...


Share:

Koneksi PHP ke Database MySQL

Assalamu'alaikum...

Pada artikel kali ini, saya akan melanjutkan dari artikel sebelumnya web sederhana web sederhana

1. Database Management System (DBMS)
Buka browser (Google Chrome) > localhost > phpMyAdmin

2. Membuat Tabel User

3. Atribut User

4. Database Connection 
<?php
/* Database connection start */
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "praktikum";
$conn       = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Koneksi Gagal: " . $conn->connect_error);
}else{
echo "Koneksi Sukses";
}
/* Database connection end */
?>

-Tampilan-


Sekian,
Wassalamu'alaikum...


Share:

Web sederhana dengan menggunakan Framework Bootstrap

Assalamu'alaikum...

Pada artikel kali ini, saya akan membahas membuat project web sederhana


1. Membuka XAMPP, lalu klik start pada Apache dan MySQL.



2. Buka This PC > Local Disk (C:) > xampp > htdocs. Setelah itu membuat new folder yaitu praktikum, di dalam folder tersebut terdapat folder asset. Dan di dalam folder asset terdapat folder css, js dan image.




3. Buka sublime, setelah itu klik File > Open Folder> Lokal Disk (C:) > xampp > htdcos > praktikum > setelah itu klik  select folder.



4. Save script di link bawah ini!!!
-------(save di folder css).
-------(save di folder js).
-------(save di folder js).
-------(save di folder js).

5. Setelah selesai kita men-save link yg diatas. Lalu kita buka Sublime > file > lalu buat script seperti dibawah ini!! Lalu save kan "index.php".
<!DOCTYPE html>
<html>
<head>
  <title>praktikum</title>
<link rel="stylesheet" type="text/css" href="asset/css/coba.css">
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>

<script type="text/javascript" src="asset/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="asset/js/pooper.min.js"></script>
<script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
</body>
</html>

6. Pada bagian kepala <head> terdapat tag <meta> yang menampung nilai viewportViewport digunakan untuk desain web yang responsif (responsive web design). Dan letakkan dibawah <head> paling atas.
<meta name="viewport" content="width=device-width, initial-scale=1">

7. Navigation Bar (NavBar)
Navbar dibuat dengan tag <nav> dan letakkan dibawah body. Navbar juga memiliki banyak pilihan component navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="text-uppercase"><p class="navbar-brand" href="#">Home</a></p>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">   
  <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <p class="text-uppercase"><a class="nav-link" href="#">Anime List<span class="sr-only">(current)</span></a></p>
    </li>
    <li class="nav-item">
      <p class="text-uppercase"><a class="nav-link" href="#">Jadwal Rilis</a></p>
    </li>
    <li class="nav-item active">
      <p class="text-uppercase"><a class="nav-link" href="#">About<span class="sr-only">(current)</span></a></p>
    </li> 
  </ul>
  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
  </div>
  </div>
</nav>
-Tampilan Desktop-
-Tampilan Mobile-
8. Carousel
Carousel atau sering juga disebut slideshow merupakan proses penampilan gambar
gambar yang diberi slide. Dan letakkan script setelah </nav>.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="asset/image/gambar.png">
    </div>
    <div class="carousel-item ">
      <img class="d-block w-100" src="asset/image/suka.jpg">    
    </div>
    <div class="carousel-item ">
      <img class="d-block w-100" src="asset/image/yash.png">    
    </div>
  </div>
</div>
                                                                      -Tampilan Desktop-
-Tampilan Mobile-

9. Card
Card adalah fitur yang diberikan di bootstrap 4 untuk membuat box yang memiliki border dan padding didalamnya, dalam card ini anda dapat mengatur bagian header, footer, content, warna dan pengaturan yang lain. Dan berikut langkah-langkahnya:
  • Untuk membuat jarak makanya gunakan <hr>.
  • Letakkan dibawah </div>.
  • Tambahkan class .card didalam tag <div>.
  • Didalam tag <div> buatlah tag <div> lagi dan tambahkan class .card-body untuk membuat bagian isi dari card tersebut.
<hr>
<div class="row">
  <div class="col-6"></div>
</div>
<div class="row">
   <div class="col-md">
     <div class="card">
       <img class="card-img-top" src=asset/image/gambar.png alt="Card image cap">
       <div class="card-body">
         <h4 class="card-title">Clannad</h4>          
           <h6 class="card-title">Description:</h6>
      <p class="text-justify">A high school student who cares little about school or others meets a lonely girl who had to repeat a year while all her friends finished high school. He decides to hang out with her and soon meets more friendly students.</p>
  <p class="card-text"><small class="text-muted">Released: 2004</small></p>
    <button type="button" class="btn btn-secondary btn-lg">Go!!!</button>
          </div>
      </div>
   </div>
</div>
-Tampilan Desktop-
-Tampilan Mobile-

Sekian,
Wassalamu'alaikum...


Share:

Membuat Proyek Ionic

Assalamu'alaikum...

Pada artikel ini saya akan melanjutkan dari artikel sebelumnya yaitu Cara Install Ionic


Untuk membuat project pada ionic, memerlukan koneksi internet yang stabil, agar saat membuat project tidak terjadi eror.


1. Buka CMD > ketikkan perintah "E:", lalu tekan enter. Perintah tersebut adalah untuk memindahkan directory dari Local Disk (C:) ke Local Disk (E).

2. Buka CMD > ketikkan perintah "md Mobile-5A", lalu tekan enter. Perintah tersebut adalah untuk membuat folder untuk meletakkan file project.
3. Buka CMD > ketikkan perintah "cd Mobile-5A", lalu tekan enter. perintah tersebut adalah untuk masuk ke folder untuk memulai project.
4. Selanjutnya apabila muncul warning "Try Ionic 4?" Lalu lanjutkan ketikkan perintah "N" yang artinya No.
5. Lalu selanjutnya untuk melihat project telah selesai dan berhasil dibuat. Buka CMD > ketikkan perintah "E:", perintah tersebut untuk masuk ke Local Disk (E:). Lalu ketikkan perintah "cd Mobile-5A", perintah tersebut untuk masuk ke dalam folder Mobile-5A. Lalu ketikkan perintah "cd praktikum", perintah tersebut untuk masuk ke dalam folder praktikum. Dan ketikkan perintah "ionic serve", perintah tersebut untuk menjalankan proyek dan tunggu hingga selesai.
6. Dan setelah proses selesai, buka browser dan ketikkan perintah "localhost:8100", maka muncul gambar seperti dibawah ini.


-Tampilan Desktop-
-Tampilan Mobile-


Sekian,
Wassalamu'alaikum...


Share:

Cara Install Ionic

Assalamu'alaikum...


Pada artikel ini saya akan melanjutkan dari artikel sebelumnya yaitu Pengenalan Ionic Framework.

Dalam menginstall ionic menggunakan command line NodeJs. Berikut beberapa tool yang harus dipersiapkan terlebih dahulu sebelum proses install ionic. Tool tersebut adalah:
1. NodeJs > https://nodejs.org/en/download/
2. Git > https://gitforwindows.org/
3. JDK > https://www.oracle.com/technetwork/java/javase/downloads/index.html
4. Gradle > https://gradle.org/releases/?_ga=2.144655601.532818576.1521710395-929348098.1521710395

Langkah-langkah install ionic:

1. Menginstall NodeJs.
    a. Install NodeJs (Install file setup.exe).
    b. Buka CMD > ketikkan perintah "npm-v". Dan untuk mengetahui apakah NodeJs yang        sudah kita install berhasil, seperti gambar dibawah ini.
    c. Install Cordova.
    • Buka CMD > ketikkan perintah "npm install -g ionic cordova", seperti gambar dibawah ini.
    • Buka CMD > ketikkan perintah "cordova-v", untuk memeriksa apakah cordova yang sudah kita install berhasil, seperti gambar dibawah ini.
2. Menginstall Git.
    a. Install Git (Install file setup.exe).

3. Menginstall JDK, sesuaikan dengan versi 64bit atau 32bit di laptop anda.
    a. Buka CMD > ketikkan perintah "java-versoin", untuk memeriksa apakah sudah berhasil terinstall, seperti gambar dibawah ini.

Langkah-langkah Setup Environment:
1. Selanjutnya untuk Setup Environment, dengan cara  klik This Pc (klik kanan) > Properties  > Advanced system setting > System Properties > Environment Variabels.

2. Lalu pada Environment Variables > System variabels, lalu cari yang bernama "Path" > klik edit.
3. Untuk Set Environment (Path) JAVA, tambahkan perintah berikut ";%JAVA_HOME%\bin;" lalu klik ok.
4. Lalu copy file gradle-4.10.1 ke Local Disk (C:).
5. Selanjutnya Setup Environment kembali. Langkah-langkahnya seperti point ke 1.
6. Lalu pada Environment Variables > System variabels, lalu cari yang bernama "Path" > klik edit.
7. Untuk Set Environment (Path) gradle, tambahkan perintah berikut "C:\gradle-4.10.1\bin;" lalu klik ok. 

8. Buka CMD > ketikkan perintah "gradle-v", untuk memeriksa apakah sudah berhasil terinstall, seperti gambar dibawah ini.

9. Lalu di Local Disk (D:) buat folder baru dan beri nama folder tersebut "SDK", lalu buat kembali folder baru di dalam folder tersebut dan beri nama "sdk". Copy kan 5 file seperti gambar dibawah ini.

10. Selanjutnya Setup Environment kembali. Langkah-langkahnya seperti point ke 1.


11. Lalu pada Environment Variables > System variabels, lalu cari yang bernama "Path" > klik edit.
12. Untuk Set Environment (Path) SDK tambahkan perintah berikut "E:\SDK\sdk\tools\;E:\SDK\sdk\platform-tools" lalu klik ok

Sekian,
Wassalamu'alaikum...




Share:

Recent Posts