MODUL UKK RPL PAKET 3

 

MODUL UKK RPL PAKET 3

APLIKASI WEBSITE GALERI FOTO

A.    SEBELUM KE LANGKAH PENGERJAAN SOAL

Kebutuhan software sebelum membuat source code

Pertama : INTSAL APLIKASI XAMPP artinya sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database dan Penerjemah bahasa

Kedua : INSTAL APLIKASI VISUAL CODE, SUBLIME TEXT artinya aplikasi teks editor untuk memulai membuat program berbasis website tentunya jika visual code memiliki kelebihan Fungsi error checker yang sangat-sangat membantu ketika lagi nulis/edit kode pemrograman sedangkan sublime text Fungsi auto complete dalam penulisan kode pemrograman.

Ketiga : PAHAMI PERBEDAAN BAHASA PEMOGRAMAN

A.    Membangun situs web menjadi interaktif dan menarik yaitu HTML, CSS, dan JavaScript.

B.     Bahasa Pemograman Tingkat tinggi menggunakan PHP artinya bahasa pemrograman server side scripting yang bersifat open source bekerja membuat, membuka, membaca, menulis, dan membatasi file di server-side, maka skrip PHP diproses di server.

C.     Kerangka Kerja menggunakan Bootsrap 5 karena framework front-end menciptakan tampilan website responsiv fiturnya CSS dan JS.

B.     LANGKAH PENGERJAAN SOAL

Nomor 1 jalan aplikasi XAMPP à Klik star Apache dan Mysql à Run Shell

Menampilkan halaman database

a.       Membuat table user

b.      Membuat table foto dan relasi atribut userid

c.       Membuat table album dan relasi atribut userid

d.      Mengubah struktur table foto tujuannya untuk relasi atribut albumid

e.      Membuat table likefoto dan relasi atribut fotoid or userid

f.        Membuat table komentarfoto dan relasi atribut fotoid or userid

 

 

 

 

 

 

 

 

 

Mengecek hasil output masuk ke laman : http://localhost/phpmyadmin/index.php?route=/database/designer&db=gallery

kemudian save

 

Nomor 2 Membuat Folder baru di dalam htdoct supaya program bisa dijalankan

          Nama folder UKK-Gallery-nama perserta ujian

          Contoh : UKK-Gallery-Risma

Nomor 3 download framework di https://getbootstrap.com/docs/5.0/getting-started/download/

Kemudian extrak menjadi folder dengan nama asset

Nomor 4 jalan aplikasi VISUAL CODE ATAU SUBLIME TEXT

a.       Membuat koding koneksi.php artinya menghubungkan PHP dengan database

<?php     $conn=mysqli_connect("localhost","root","","gallery") ?>

 

b.      Membuat laman index.php artinya file yang pertama kali di load.

c.       Membuat laman registrasi.php

 

<div class="text-center">                          <h5>Daftar Akun Baru</h5>                </div>                <form action="proses_register.php" method="POST">                          <label class="form-label">Username</label>                          <input type="text" name="username" class="form-control" required>                          <label class="form-label">Password</label>                          <input type="password" name="password" class="form-control" required>             <label class="form-label">Email</label>             <input type="email" name="email" class="form-control" required>             <label class="form-label">Nama Lengkap</label>             <input type="text" name="namalengkap" class="form-control" required>             <label class="form-label">Alamat</label>             <input type="text" name="alamat" class="form-control" required>                          <div class="d-grid mt-2">                            <button class="btn btn-primary" type="submit" name="kirim">DAFTAR</button>                          </div>                </form>                <hr>                <p>sudah punya akun? <a href="login.php">Login Disini</a></p>                </div>

 

Logo RPL SMK AlGhifari Banyuresmi

LOGO TERBARU JURUSAN RPL

SMK AL-GHIFARI BANYURESMI 

baground putih

Login dan Registrasi Website Galeri UKK

HALAMN REGISTRASI DAN JUDUL WEB GALLERY

aksi_login.php

<?php

include "koneksi.php";

session_start();

$username=$_POST['username'];

$password=md5($_POST['password']);

$sql=mysqli_query($conn,"select * from user where username='$username' and password='$password'");

$cek=mysqli_num_rows($sql);

if($cek==1){

    while($data=mysqli_fetch_array($sql)){

        $_SESSION['userid']=$data['userid'];

        $_SESSION['namalengkap']=$data['namalengkap'];

    }

    header("location:home.php");

}else{

    header("location:login.php");

}

?>

aksi_register.php

<?php

include "koneksi.php";

$username=$_POST['username'];

$password=md5($_POST['password']);

$email=$_POST['email'];

$namalengkap=$_POST['namalengkap'];

$alamat=$_POST['alamat'];

$sql=mysqli_query($conn,"insert into user values('','$username','$password','$email','$namalengkap','$alamat')");

header("location:login.php");

?>

login.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="vievport" content="width=device-width, initial-scale=1">

<title>Website Galeri Foto</title>

<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-lg bg-body-tertiary">

  <div class="container">

    <a class="navbar-brand" href="index.php">Website Galeri Foto</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collaps mt-2" id="navbarNavAltMarkup">

      <div class="navbar-nav me-auto">

        

      </div>

      <a href="register.php" class="btn btn-outline-primary m-1">Daftar</a>

      <a href="login.php" class="btn btn-outline-success m-1">Masuk</a>

    </div>

  </div>

</nav>

<div  class="container py-5">

  <div class="row justify-content-center">

    <div class="col-md-4">

      <div class="card">

      <div class="card-body bg-light">

        <div class="text-center">

        <h5>Login Aplikasi</h5>

        </div>

        <form action="aksilogin.php" method="POST">

        <label class="form-label">Username</label>

        <input type="text" name="username" class="form-control" required>

        <label class="form-label">Password</label>

        <input type="password" name="password" class="form-control" required>

        <div class="d-grid mt-2">

          <button class="btn btn-primary" type="submit" name="kirim">Login</button>

        </div>

        </form>

        <hr>

        <p>Belum punya akun? <a href="register.php">daftar disini</a></p>

        </div>

      </div>

      </div>

    </div>

  </div>

</div>

<footer class="d-flex justify-content-center border-top mt-3 bg-light filex-bottom">

<p>&copy; UKK RPL 2024 | AMELIANI</p>

</footer>

<script type="text/javascript" src="asset/js/bootstrap.min.css">"></script>

</body>

</html>

register.php

 <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="vievport" content="width=device-width, initial-scale=1">

<title>Website Galeri Foto</title>

<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-lg bg-body-tertiary">

  <div class="container">

    <a class="navbar-brand" href="index.php">Website Galeri Foto</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collaps mt-2" id="navbarNavAltMarkup">

      <div class="navbar-nav me-auto">

        

      </div>

      <a href="register.php" class="btn btn-outline-primary m-1">Daftar</a>

      <a href="login.php" class="btn btn-outline-success m-1">Masuk</a>

    </div>

  </div>

</nav>

<div  class="container py-5">

  <div class="row justify-content-center">

    <div class="col-md-4">

      <div class="card">

      <div class="card-body bg-light">

        <div class="text-center">

        <h5>Daftar Akun Baru</h5>

        </div>

        <form action="proses_register.php" method="POST">

        <label class="form-label">Username</label>

        <input type="text" name="username" class="form-control" required>

        <label class="form-label">Password</label>

        <input type="password" name="password" class="form-control" required>

            <label class="form-label">Email</label>

            <input type="email" name="email" class="form-control" required>

            <label class="form-label">Nama Lengkap</label>

            <input type="text" name="namalengkap" class="form-control" required>

            <label class="form-label">Alamat</label>

            <input type="text" name="alamat" class="form-control" required>

        <div class="d-grid mt-2">

          <button class="btn btn-primary" type="submit" name="kirim">DAFTAR</button>

        </div>

        </form>

        <hr>

        <p>sudah punya akun? <a href="login.php">daftar disini</a></p>

        </div>

      </div>

      </div>

    </div>

  </div>

</div>

<footer class="d-flex justify-content-center border-top mt-3 bg-light fixed-bottom">

<p>&copy; UKK RPL 2024| AMELIANI</p>

</footer>

<script type="text/javascript" src="assets/js/bootstrap.min.css">"></script>

</body>

</html>

LOGIN dan Registrasi Website Galleri

Pengertian dan Tujuan membuat Website Gallery

Website gallery adalah sebuah situs web yang menampilkan kumpulan gambar, foto, atau karya seni visual lainnya. Tujuan utama dari website gallery adalah untuk memamerkan karya-karya tersebut kepada pengunjung, sehingga pengunjung dapat melihat, menilai, dan mengapresiasi karya-karya tersebut.

Beberapa tujuan utama dari website gallery antara lain:

1. **Pameran Karya**: Website gallery menyediakan platform untuk seniman, fotografer, atau kreator visual lainnya untuk memamerkan karya-karya mereka kepada khalayak luas. Hal ini memungkinkan para seniman untuk mendapatkan eksposur dan pengakuan atas karya mereka.

2. **Menginspirasi dan Menghibur**: Website gallery juga bertujuan untuk menginspirasi dan menghibur pengunjungnya. Melalui galeri-galeri gambar dan karya visual yang menarik, pengunjung dapat menemukan inspirasi baru, mengagumi keindahan, atau sekadar menikmati estetika visual.

3. **Pendidikan dan Informasi**: Galeri gambar juga dapat digunakan sebagai sarana pendidikan dan informasi. Misalnya, galeri foto sejarah bisa memberikan wawasan tentang peristiwa masa lalu, atau galeri seni kontemporer dapat membantu memahami tren dan gaya seni terkini.

4. **Penjualan Karya**: Bagi seniman dan kreator, website gallery bisa menjadi sarana untuk menjual karya-karya mereka. Pengunjung yang tertarik dengan suatu karya dapat membelinya secara online atau menghubungi seniman untuk informasi lebih lanjut.

5. **Menghubungkan Komunitas Seni**: Website gallery seringkali menjadi tempat untuk membangun dan menghubungkan komunitas seni. Para seniman dan penggemar seni dapat berinteraksi, berbagi ide, dan membangun jaringan di dalam platform ini.

Dengan demikian, website gallery tidak hanya berfungsi sebagai tempat untuk menampilkan karya-karya visual, tetapi juga sebagai medium yang penting dalam mempromosikan seni, memperluas wawasan, dan memperkaya pengalaman pengguna di dunia seni.

Membuat Koneksi dan Registrasi Website Gallery

downloand framework bootrap 5 terlebih dahulu java dan css dibawah ini:

https://getbootstrap.com/docs/5.0/getting-started/download/

kemuadian ekstrak file bootraps 5 dengan nama aset

pastikan sudah membuat relasi database gallery

membuat koding index.php

<?php 

  // session_start();

  // if(!isset($_SESSION['UserID'])){

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

  // }

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Web Galery Foto</title>

    <link rel="stylesheet" href="asset/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-expand-lg bg-body-tertiary">

  <div class="container">

    <h2 class="navbar-brand" href="index.php">Website Galery Foto</h2>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse mt-2" id="navbarNavAltMarkup">

        <div class="navbar-nav me-auto"> </div>

        <a href="register.php" class="btn btn-outline-primary m-1">Daftar</a>

        <a href="login.php" class="btn btn-outline-success m-1">Masuk</a>

      <!-- <ul class="navbar-nav">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Features</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Pricing</a>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled" aria-disabled="true">Disabled</a>

        </li>

      </ul> -->

      </div>

    </div>

</nav>

<div class="container mt-3">

    <div class="row">

        <div class="col-md-3">

            <div class="card">

                <img src="nouser.jpg" alt="Hi Kids" class="card-img-top" title="" style="height:12rem;">

                <div class="card-footer text-center">

                    <a href="">10 Suka</a>

                    <a href="">3 komentar</a>

                </div>

            </div>

        </div>

    </div>

</div>

<footer class="d-flex justify-content-center border-top mt-3 bg-light fixed-bottom">

    <p>&copy; UKK RPL 2024 | Name | SMK AL-GHIFARI</p>

</footer>

<script href="asset/js/bootstrap.min.js"></script>

</body>

</html>