Tugas Sesi 3 LSP

Tugas LSP Sesi 3
Nama : Wesley Yosa Fullerton Manurung

Kelas : 4KA22
NPM : 16119580
1. Buat algoritma halaman login

2. Buat codingan halaman login
3. Buat codingan halaman utama admin
Jawab :
1. Algoritma halaman login
Button Login Admin diletakkan pada bagian footer landing page, dan ketika button tersebut akan
langsung terdirect ke halaman login. Setelah login maka akan masuk kedalam halaman login.php,
lalu setelah login akan masuk ke dalam halaman admin panel
2. Codingan halaman login
<?php
session_start();
$connection = mysqli_connect('localhost', 'root', '', 'madingonline') or
die ('koneksi db tidak terhubung!')
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&famil
y=Roboto:wght@400;500;900&display=swap" rel="stylesheet">
<title>Admin Login</title>
</head>
<body>
<div class="login-form">
<form action="login.php" method="post" class="loginlogin-form">
<h1 class="loginh1">Admin Mading Online</h1>
<div class="formInput">
<label class="lblform">Username</label>
<input type="text" name="username" placeholder="Username"
required="" class="input-form"
/>
<span class="span-form"></span>
</div>
<div class="formInput">
<label class="lblform">Password</label>
<input type="password" name="password" placeholder="Password"
required="" class="input-form"
/>
<span class="span-form"></span>
</div>
<button type="submit" name="login" value="Login" class="btn-
login">Submit</button>
</form>
</div>
<?php
if (isset($_POST['login'])){
$username = $_POST['username'];
$password = $_POST['password'];
$select = mysqli_query($connection," SELECT * FROM user WHERE username

= '$username' AND password = '$password' ");
$row = mysqli_fetch_array($select);
if(is_array($row)) {
$_SESSION["username"] = $row['username'];
$_SESSION["password"] = $row['password'];
} else {
echo '<script type = "text/javascript">';
echo 'alert("username atau password salah!");';
echo 'window.location.href = "login.php" ';
echo '</script>';
}
}
if(isset($_SESSION["username"])){
header("Location:dashboard.php");
}
?>
</body>
</html>
3. Codingan halaman admin
Pada bagian halaman admin saya menggunakan framework dari niceadmin dan saya
implementasikan ke dalam codingan saya dengan nama file Dashboard.php.
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: login.php");
}
?>
Selamat Datang <?php echo $_SESSION['username'];?>
<a href="logout.php">logout</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Components / Accordion - NiceAdmin Bootstrap Template</title>

<meta content="" name="description">
<meta content="" name="keywords">


<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">


<link href="https://fonts.gstatic.com" rel="preconnect">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,
600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,3
00i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">


<link href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css"
rel="stylesheet">
<link href="assets/vendor/quill/quill.snow.css" rel="stylesheet">
<link href="assets/vendor/quill/quill.bubble.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/simple-datatables/style.css" rel="stylesheet">


<link href="assets/css/style.css" rel="stylesheet">

</head>
<body>


<header id="header" class="header fixed-top d-flex align-items-center">
<div class="d-flex align-items-center justify-content-between">

<a href="index.html" class="logo d-flex align-items-center">
<img src="assets/img/logo.png" alt="">
<span class="d-none d-lg-block">NiceAdmin</span>
</a>
<i class="bi bi-list toggle-sidebar-btn"></i>
</div>
<div class="search-bar">
<form class="search-form d-flex align-items-center" method="POST"
action="#">
<input type="text" name="query" placeholder="Search" title="Enter
search keyword">
<button type="submit" title="Search"><i class="bi bi-
search"></i></button>
</form>
</div>
<nav class="header-nav ms-auto">

<ul class="d-flex align-items-center">
<li class="nav-item d-block d-lg-none">
<a class="nav-link nav-icon search-bar-toggle " href="#">
<i class="bi bi-search"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">

<i class="bi bi-bell"></i>
<span class="badge bg-primary badge-number">4</span>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow

notifications">
<li class="dropdown-header">
You have 4 new notifications
<a href="#"><span class="badge rounded-pill bg-primary p-2
ms-2">View all</span></a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li class="notification-item">
<i class="bi bi-exclamation-circle text-warning"></i>
<div>
<h4>Lorem Ipsum</h4>
<p>Quae dolorem earum veritatis oditseno</p>
<p>30 min. ago</p>
</div>
</li>
<li>
</li>
<i class="bi bi-x-circle text-danger"></i>
<div>
<h4>Atque rerum nesciunt</h4>
<p>1 hr. ago</p>
</div>
</li>
<li>
</li>
<i class="bi bi-check-circle text-success"></i>
<div>
<h4>Sit rerum fuga</h4>
<p>2 hrs. ago</p>
</div>
</li>
<li>
</li>
<i class="bi bi-info-circle text-primary"></i>
<div>
<h4>Dicta reprehenderit</h4>
<p>4 hrs. ago</p>
</div>
</li>
<li>
</li>
<li class="dropdown-footer">
<a href="#">Show all notifications</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">

<i class="bi bi-chat-left-text"></i>
<span class="badge bg-success badge-number">3</span>
</a>
messages">
You have 3 new messages
<a href="#"><span class="badge rounded-pill bg-primary p-2
ms-2">View all</span></a>
</li>
<li>
</li>
<li class="message-item">
<a href="#">
<img src="assets/img/messages-1.jpg" alt=""
class="rounded-circle">
<div>
<h4>Maria Hudson</h4>
<p>Velit asperiores et ducimus soluta repudiandae labore
officia est ut...</p>
<p>4 hrs. ago</p>
</div>
</a>
</li>
<li>
</li>
<a href="#">
<div>
<h4>Anna Nelson</h4>
<p>6 hrs. ago</p>
</div>
</a>
</li>
<li>
</li>
<a href="#">
<div>
<h4>David Muldon</h4>
<p>8 hrs. ago</p>
</div>
</a>
</li>
<li>
</li>
<li class="dropdown-footer">
<a href="#">Show all messages</a>
</li>
</ul>
</li>
<li class="nav-item dropdown pe-3">
<a class="nav-link nav-profile d-flex align-items-center pe-0"

href="#" data-bs-toggle="dropdown">
<img src="assets/img/profile-img.jpg" alt="Profile"
<span class="d-none d-md-block dropdown-toggle ps-2">Wesley
Manurung</span>
</a>

profile">
<h6>Wesley Manurung</h6>
<span>UI/UX Specialist</span>
</li>
<li>
</li>
<li>
<a class="dropdown-item d-flex align-items-center"
href="users-profile.html">
<i class="bi bi-person"></i>
<span>My Profile</span>
</a>
</li>
<li>
</li>
<li>
href="users-profile.html">
<i class="bi bi-gear"></i>
<span>Account Settings</span>
</a>
</li>
<li>
</li>
<li>
href="pages-faq.html">
<i class="bi bi-question-circle"></i>
<span>Need Help?</span>
</a>
</li>
<li>
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bi bi-box-arrow-right"></i>
<span>
<a href="logout.php">Sign Out</a>
</span>
</a>
</li>
</ul>

</li>
</ul>
</nav>
</header>


<aside id="sidebar" class="sidebar">
<ul class="sidebar-nav" id="sidebar-nav">
<li class="nav-item">
<a class="nav-link collapsed" href="index.html">
<i class="bi bi-grid"></i>
<span>Dashboard</span>
</a>
</li>
<a class="nav-link collapsed" data-bs-target="#components-nav"
data-bs-toggle="collapse" href="#">
<i class="bi bi-menu-button-wide"></i><span>Components</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="components-nav" class="nav-content collapse " data-bs-
parent="#sidebar-nav">
<li>
<a href="components-alerts.html">
<i class="bi bi-circle"></i><span>Alerts</span>
</a>
</li>
<li>
<a href="components-accordion.html">
<i class="bi bi-circle"></i><span>Accordion</span>
</a>
</li>
<li>
<a href="components-badges.html">
<i class="bi bi-circle"></i><span>Badges</span>
</a>
</li>
<li>
<a href="components-breadcrumbs.html">
<i class="bi bi-circle"></i><span>Breadcrumbs</span>
</a>
</li>
<li>
<a href="components-buttons.html">
<i class="bi bi-circle"></i><span>Buttons</span>
</a>
</li>
<li>
<a href="components-cards.html">
<i class="bi bi-circle"></i><span>Cards</span>
</a>
</li>
<li>
<a href="components-carousel.html">
<i class="bi bi-circle"></i><span>Carousel</span>
</a>
</li>
<li>
<a href="components-list-group.html">
<i class="bi bi-circle"></i><span>List group</span>
</a>
</li>
<li>
<a href="components-modal.html">
<i class="bi bi-circle"></i><span>Modal</span>
</a>
</li>
<li>
<a href="components-tabs.html">
<i class="bi bi-circle"></i><span>Tabs</span>
</a>
</li>
<li>
<a href="components-pagination.html">
<i class="bi bi-circle"></i><span>Pagination</span>
</a>
</li>
<li>
<a href="components-progress.html">
<i class="bi bi-circle"></i><span>Progress</span>
</a>
</li>
<li>
<a href="components-spinners.html">
<i class="bi bi-circle"></i><span>Spinners</span>
</a>
</li>
<li>
<a href="components-tooltips.html">
<i class="bi bi-circle"></i><span>Tooltips</span>
</a>
</li>
</ul>
</li>
<a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-
toggle="collapse" href="#">
<i class="bi bi-journal-text"></i><span>Forms</span><i class="bi
bi-chevron-down ms-auto"></i>
</a>
<ul id="forms-nav" class="nav-content collapse " data-bs-
<li>
<a href="forms-elements.html">
<i class="bi bi-circle"></i><span>Form Elements</span>
</a>
</li>
<li>
<a href="forms-layouts.html">
<i class="bi bi-circle"></i><span>Form Layouts</span>
</a>
</li>
<li>
<a href="forms-editors.html">
<i class="bi bi-circle"></i><span>Form Editors</span>
</a>
</li>
<li>
<a href="forms-validation.html">
<i class="bi bi-circle"></i><span>Form Validation</span>
</a>
</li>
</ul>
</li>
<a class="nav-link collapsed" data-bs-target="#tables-nav" data-
bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-
reverse"></i><span>Tables</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav" class="nav-content collapse " data-bs-
<li>
<a href="tables-general.html">
<i class="bi bi-circle"></i><span>General Tables</span>
</a>
</li>
<li>
<a href="tables-data.html">
<i class="bi bi-circle"></i><span>Data Tables</span>
</a>
</li>
</ul>
</li>
<a class="nav-link collapsed" data-bs-target="#charts-nav" data-
bs-toggle="collapse" href="#">
<i class="bi bi-bar-chart"></i><span>Charts</span><i class="bi
bi-chevron-down ms-auto"></i>
</a>
<ul id="charts-nav" class="nav-content collapse " data-bs-
<li>
<a href="charts-chartjs.html">
<i class="bi bi-circle"></i><span>Chart.js</span>
</a>
</li>
<li>
<a href="charts-apexcharts.html">
<i class="bi bi-circle"></i><span>ApexCharts</span>
</a>
</li>
<li>
<a href="charts-echarts.html">
<i class="bi bi-circle"></i><span>ECharts</span>
</a>
</li>
</ul>
</li>
<a class="nav-link collapsed" data-bs-target="#icons-nav" data-bs-
toggle="collapse" href="#">
<i class="bi bi-gem"></i><span>Icons</span><i class="bi bi-
chevron-down ms-auto"></i>
</a>
<ul id="icons-nav" class="nav-content collapse " data-bs-
<li>
<a href="icons-bootstrap.html">
<i class="bi bi-circle"></i><span>Bootstrap Icons</span>
</a>
</li>
<li>
<a href="icons-remix.html">
<i class="bi bi-circle"></i><span>Remix Icons</span>
</a>
</li>
<li>
<a href="icons-boxicons.html">
<i class="bi bi-circle"></i><span>Boxicons</span>
</a>
</li>
</ul>
</li>
<li class="nav-heading">Pages</li>
<a class="nav-link collapsed" href="users-profile.html">
<i class="bi bi-person"></i>
<span>Profile</span>
</a>
</li>
<a class="nav-link collapsed" href="pages-faq.html">
<i class="bi bi-question-circle"></i>
<span>F.A.Q</span>
</a>
</li>
<a class="nav-link collapsed" href="pages-contact.html">
<i class="bi bi-envelope"></i>
<span>Contact</span>
</a>
</li>
<a class="nav-link collapsed" href="pages-register.html">
<i class="bi bi-card-list"></i>
<span>Register</span>
</a>
</li>
<a class="nav-link collapsed" href="pages-login.html">
<i class="bi bi-box-arrow-in-right"></i>
<span>Login</span>
</a>
</li>
</ul>
</aside>
<main id="main" class="main">
<div class="pagetitle">
<h1>Blank Page</h1>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item">Pages</li>
<li class="breadcrumb-item active">Blank</li>
</ol>
</nav>
</div>
<section class="section">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Example Card</h5>
<p>This is an examle page with no contrnt. You can use it as
a starter for your custom pages.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Example Card</h5>
<p>This is an examle page with no contrnt. You can use it as
a starter for your custom pages.</p>
</div>
</div>
</div>
</div>
</section>
</main>


<footer id="footer" class="footer">
<div class="copyright">
© Copyright <strong><span>NiceAdmin</span></strong>. All Rights
Reserved
</div>
<div class="credits">




Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</footer>
<a href="#" class="back-to-top d-flex align-items-center justify-

content-center"><i class="bi bi-arrow-up-short"></i></a>


<script src="assets/vendor/apexcharts/apexcharts.min.js"></script>
<script
src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/chart.js/chart.umd.js"></script>
<script src="assets/vendor/echarts/echarts.min.js"></script>
<script src="assets/vendor/quill/quill.min.js"></script>
<script src="assets/vendor/simple-datatables/simple-
datatables.js"></script>
<script src="assets/vendor/tinymce/tinymce.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>


<script src="assets/js/main.js"></script>
</body>
</html>

Tugas Sesi 3 LSP

Uploaded by

Copyright:

Available Formats

Tugas Sesi 3 LSP

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tugas Sesi 3 LSP

Uploaded by

Copyright:

Available Formats

Tugas LSP Sesi 3

Nama : Wesley Yosa Fullerton Manurung

1. Buat algoritma halaman login

$select = mysqli_query($connection," SELECT * FROM user WHERE username

Selamat Datang <?php echo $_SESSION['username'];?>

<title>Components / Accordion - NiceAdmin Bootstrap Template</title>

<div class="d-flex align-items-center justify-content-between">

<nav class="header-nav ms-auto">

<li class="nav-item dropdown">

<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">

<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow

</ul>

</li>

<li class="nav-item dropdown">

<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">

</ul>

</li>

<li class="nav-item dropdown pe-3">

<a class="nav-link nav-profile d-flex align-items-center pe-0"

<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow

</ul>

</header>

<ul class="sidebar-nav" id="sidebar-nav">

</aside>

<main id="main" class="main">

</main>

<a href="#" class="back-to-top d-flex align-items-center justify-

You might also like