Giter Club home page Giter Club logo

tpm-2019's Introduction

Kopi Dalar - TPM Project Case Study

This repo is made for BNPM TPM learning materials, the goal in this case is to create a CRUD system using Laravel 6.x for various products sold by Kopi Dalar. This project will give a reference about:

  • Creating Model & Migration
  • Creating blade templates and structuring
  • Creating CRUD function (except displaying information on every single product)
  • Input validation with Error return

Special Thanks

In this document, I would like to thank Agustinus Theodorus for helping to contribute to the Frontend of this project.

Frontend Snippet

This piece of code is pure HTML that can be used as a reference to this frontend

  • Main Structure
<!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">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="your_url/style.css">
    <title>Kopi Dalar</title>
</head>
<body>
    <header>
        ...
    </header>

    <main>
        ...
    </main>

    <footer class="footer-custom text-center bg-light">
        ...
    </footer>
</body>
</html>
  • Header
<nav class="navbar-custom bg-light d-flex justify-content-between">
	<img src="your_url/kopidalar_text_logo.png">
	<div class="d-flex navbar-item-container">
		<a class="navbar-item text-brown" href="your_url_to_home">Home</a>
		<a class="navbar-item text-brown" href="your_url_to_product_list">Coffee</a>
	</div>
</nav>
  • Footer
<span class="text-brown">©️&nbsp;2019&nbsp;Copyright&nbsp;Kopi Dalar</span>
  • Product List
<div class="container">
    <div class="d-flex align-items-center justify-content-between mt-4 pl-3 pr-3">
        <h5 class="d-block font-weight-bold text-brown mt-2">Coffee</h5>
        <a class="btn btn-warning text-white d-block" href="your_url_to_add_form">Add Coffee</a>
    </div>
    <hr>
    <div>
    
            <div class="d-flex align-items-center justify-content-between text-brown pl-3 pr-3 mt-2 mb-2">
                <div class="d-flex align-items-center">
                    <h4 class="font-weight-bold pl-3">Cafe Latte</h4>
                </div>
                <div class="d-flex align-items-center">
                    <div class="font-weight-bold mr-3">
                        Rp. 30000
                    </div>
                    <div>
                        <a class="btn btn-success text-white d-block m-1" href="your_url_to_edit_form">Edit Coffee</a>
                    	<a class="btn btn-danger text-white d-block m-1">Delete Coffee</a>
                    </div>
                </div>
            </div>
           
    </div>
</div>
  • Add Product Form
<div class="container col-md-6">
    <div class="d-flex align-items-center justify-content-between mt-4 pl-3 pr-3">
        <h4 class="d-block font-weight-bold text-brown mt-2">Add Coffee</h4>
    </div>
    <hr>
    <form action="your_url" method="POST" class="form-group"> 
        <div class="input-group p-2">
        <input type="text" class="form-control" placeholder="Product Name" name="product_name">
        </div>
        <div class="input-group p-2">
            <input type="text" class="form-control" placeholder="Price" name="price">
        </div>
        <div class="p-2">
            <button class="btn btn-warning text-white d-block" type="submit">Add Coffee</button>
        </div>
    </form>
</div>

License

Read LICENSE file for detailed information

tpm-2019's People

Contributors

doctor500 avatar dependabot[bot] avatar

Stargazers

Agustinus Theodorus avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.