Scribd
Upload
100 views19 pages

Materi Workshop Laravel Stmik Widuri by WCC (Front End)

The document provides instructions and source code for creating a login page, register page, dashboard page, and detail page for a web application using Laravel and Bootstrap. It includes CSS code for custom styles and HTML/PHP code for each page with form fields, navigation menus, and placeholders for content. The pages allow users to log in/register accounts and then view a dashboard with account details.

Uploaded by

A.Busyra Fuadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
100 views19 pages

Materi Workshop Laravel Stmik Widuri by WCC (Front End)

The document provides instructions and source code for creating a login page, register page, dashboard page, and detail page for a web application using Laravel and Bootstrap. It includes CSS code for custom styles and HTML/PHP code for each page with form fields, navigation menus, and placeholders for content. The pages allow users to log in/register accounts and then view a dashboard with account details.

Uploaded by

A.Busyra Fuadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

MATERI WORKSHOP LARAVEL STMIK WIDURI (FRONT END)

Membuat halaman login dan register

- Sebelum memulai mengerjakan halaman tampilan pastikan file css (bootstrap.min.css)


telah di copy ke dalam folder css serta file js (bootstrap.min.js) ke dalam folder js
- Buat file custom.css di folder css kemudian isikan dengan script css dibawah ini :

body {
background: #c0c0c0;
}

h1 {
margin-top: 3em;
margin-bottom: 1em;
background-color: #f34c5e;
color: white;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
padding: 0.6em;
}

form {
background-color: white;
padding: 4em;
position: relative;
top: -3em;
}

.btn-#f34c5e {
background-color: #f34c5e;
border: 2px solid #f34c5e;
border-radius: 1em;
}

.btn-#f34c5e:hover {
background-color: #fff;
border: 2px solid #f34c5e;
border-radius: 1em;
color: #f34c5e;
}
input[type="text"]{
border-radius: 1em;
}

input[type="text"]:focus {
border: 2px solid #f34c5e;
border-radius: 1em;
}

input[type="email"]{
border-radius: 1em;
}

input[type="email"]:focus {
border: 2px solid #f34c5e;
border-radius: 1em;
}

input[type="password"]{
border-radius: 1em;
}

input[type="password"]:focus {
border: 2px solid #f34c5e;
border-radius: 1em;
}

1. LOGIN
Source Code :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>

<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1 class="text-center">Sign In Your Account</h1>
<form action="">
<div class="row form-group">
<label for="" class="col-md-3">Email</label>
<input type="email" name="email" id="email" class="col-
md-9 form-control" placeholder="Your email"
required>
<small class="form-text text-muted"></small>
</div>
<div class="row form-group">
<label for="" class="col-md-3">Password</label>
<input type="password" name="password" id="" class="col-
md-9 form-control" placeholder="Your password"
required>
<small class="form-text text-muted"></small>
</div>
<div class="form-group row">
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox"
name="remember" id="remember">

<label class="form-check-label" for="remember">


Remember Me
</label>
</div>
</div>
<div class="col-md-6">
<a href="">Forgot Password?</a>
</div>
</div>
<div class="row form-group">
<div class="col-md-3"></div>
<div class="col-md-6">
<button type="submit" class="btn btn-success btn-
red">Login</button>
<br><br>
<a href="#">Create an Account?</a>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

2. REGISTER
Source Code :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>

<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1 class="text-center">Create Account</h1>
<form action="">
<div class="row form-group">
<label for="" class="col-md-3">Name</label>
<input type="text" name="full_name" id="full_name"
class="col-md-9 form-control" placeholder="Your full name" required>
<small class="form-text text-muted"></small>
</div>
<div class="row form-group">
<label for="" class="col-md-3">Email</label>
<input type="email" name="email" id="email" class="col-
md-9 form-control" placeholder="Your email" required>
<small class="form-text text-muted"></small>
</div>
<div class="row form-group">
<label for="" class="col-md-3">Password</label>
<input type="password" name="password" id="" class="col-
md-9 form-control" placeholder="Your password" required>
<small class="form-text text-muted"></small>
</div>
<div class="row form-group">
<label for="" class="col-md-3">Confirm Password</label>
<input type="password" name="confirm_password" id=""
class="col-md-9 form-control" placeholder="Your confirm password" required>
<small class="form-text text-muted"></small>
</div>
<div class="row form-group">
<div class="col-md-3"></div>
<div class="col-md-6">
<button type="submit" class="btn btn-success btn-
red">Register</button>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

Membuat halaman dashboard dan detail

- Buat file dashboard.css di folder css kemudian isikan dengan script css dibawah ini :

.bg-light {
background-color: #f34c5e !important;
}

.navbar-nav .nav-item .nav-link {


color: #fff;
}

.navbar-nav .nav-item .nav-link:hover {


color: #fff;
text-decoration: underline;
}

.container-setting {
padding-left: 0px;
padding-right: 0px;
}

.navbar-brand {
color: #fff !important;
}

.container-top {
margin-top: 3em;
}

.right {
margin-right: 2em;
}

.top {
margin-top: 2em;
}

1. DASHBOARD
Source Code :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Todo Web App</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/3.2.1/css/font-awesome.min.css">
</head>

<body>
<div class="container-fluid container-setting">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Todo App</a>
<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 ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu dropdown-menu-right" aria-
labelledby="navbarDropdown">
<a class="dropdown-item" href="/users/register">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="container container-top">
<div class="row">
<div class="col-md-3 right top">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">
<a href="">Card title</a>
</h5>
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-success" data-
toggle="tooltip" data-placement="top" title="Edit"><i
class="icon-edit"></i></a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-danger" data-
toggle="tooltip" data-placement="top" title="Delete"><i
class="icon-trash"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 right top">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">
<a href="">Card title</a>
</h5>
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-success" data-
toggle="tooltip" data-placement="top" title="Edit"><i
class="icon-edit"></i></a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-danger" data-
toggle="tooltip" data-placement="top" title="Delete"><i
class="icon-trash"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 right top">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">
<a href="">Card title</a>
</h5>
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-success" data-
toggle="tooltip" data-placement="top" title="Edit"><i
class="icon-edit"></i></a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-danger" data-
toggle="tooltip" data-placement="top" title="Delete"><i
class="icon-trash"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 right top">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">
<a href="">Card title</a>
</h5>
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-success" data-
toggle="tooltip" data-placement="top" title="Edit"><i
class="icon-edit"></i></a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-danger" data-
toggle="tooltip" data-placement="top" title="Delete"><i
class="icon-trash"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 right top">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">
<a href="">Card title</a>
</h5>
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-success" data-
toggle="tooltip" data-placement="top" title="Edit"><i
class="icon-edit"></i></a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-danger" data-
toggle="tooltip" data-placement="top" title="Delete"><i
class="icon-trash"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 right top">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">
<a href="">Card title</a>
</h5>
<div class="row">
<div class="col-md-3">
<a href="#" class="btn btn-success" data-
toggle="tooltip" data-placement="top" title="Edit"><i
class="icon-edit"></i></a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-danger" data-
toggle="tooltip" data-placement="top" title="Delete"><i
class="icon-trash"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-


KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>

<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>

</html>
2. DETAIL
Source Code :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Todo Web App</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/3.2.1/css/font-awesome.min.css">
</head>

<body>
<div class="container-fluid container-setting">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Todo App</a>
<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 ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu dropdown-menu-right" aria-
labelledby="navbarDropdown">
<a class="dropdown-item" href="/users/register">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</div>

<div class="container container-top">


<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<img src="https://via.placeholder.com/500" alt="todo-image" class="img-
fluid">
</div>
<div class="col-md-3"></div>
</div><br><br>
<h1 class="text-center">Title</h1>
<br><br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the
industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to
make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets
containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including
versions of Lorem Ipsum.</p>
<br>
<a href="#" class="btn btn-success"><i class="icon-chevron-left"></i> Back</a>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-


KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>

<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>

</html>

You might also like