Pada Magang semester kali ini saya ditugaskan untuk membuat sebuah website toko online di perusahaan yang bernama CV Indotraco HD.
Ringkasan Perusahaan
CV Indotraco HD adalah perusahaan menengah kecil dalam bidang pertanian dengan menjual pestisida dan pupuk kenapa saya join CV Indotraco? Pertama di perusahaan ini belum ada website resmi dan juga website untuk menjual produk yang akan dijual.
Laporan Minggu Pertama dan Kedua yaitu membuat tampilan awal atau index nya
dengan script sebagai berikut
<!DOCTYPE html>
<html lang="en">
<!-- Basic -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Site Metas -->
<title>Plasa Pestisida</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- Firebase UI -->
<script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
<script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />
<!-- Site Icons -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Site CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Start Main Top -->
<div class="main-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="custom-select-box">
</div>
<div class="right-phone-box">
<p>Call US :- <a href="#"> +62 896 5497 8059</a></p>
</div>
<div class="our-link">
<ul>
<li><a href="login.php"><i class="fa fa-user s_color"></i> Sign In</a></li>
<li><a href="location.php"><i class="fas fa-location-arrow"></i> Our location</a></li>
<li><a href="https://wa.me/6289654978059?text=I'm%20interested%20in%20your%20pestisida%20for%20sale"><i class="fas fa-headset"></i> Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="text-slid-box">
<div id="offer-box" class="carouselTicker">
<ul class="offer-box">
<li>
<i class="fab fa-opencart"></i> 20% off Entire Purchase Promo code: offT80
</li>
<li>
<i class="fab fa-opencart"></i> 50% - 80% off on Vegetables
</li>
<li>
<i class="fab fa-opencart"></i> Off 10%! Shop Vegetables
</li>
<li>
<i class="fab fa-opencart"></i> Off 50%! Shop Now
</li>
<li>
<i class="fab fa-opencart"></i> Off 10%! Shop Vegetables
</li>
<li>
<i class="fab fa-opencart"></i> 50% - 80% off on Vegetables
</li>
<li>
<i class="fab fa-opencart"></i> 20% off Entire Purchase Promo code: offT30
</li>
<li>
<i class="fab fa-opencart"></i> Off 50%! Shop Now
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Main Top -->
<!-- Start Main Top -->
<header class="main-header">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default bootsnav">
<div class="container">
<!-- Start Header Navigation -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.php"><img src="images/logo.png" class="logo" alt=""></a>
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp">
<li class="nav-item active"><a class="nav-link" href="index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.php">About Us</a></li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle arrow" data-toggle="dropdown">SHOP</a>
<ul class="dropdown-menu">
<li><a href="shop.php">Sidebar Shop</a></li>
<li><a href="shop-detail.php">Shop Detail</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="checkout.php">Checkout</a></li>
<li><a href="my-account.php">My Account</a></li>
<li><a href="wishlist.php">Wishlist</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="gallery.php">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="contact-us.php">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- Start Atribute Navigation -->
<div class="attr-nav">
<ul>
<li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
<li class="side-menu">
<a href="#">
<i class="fa fa-shopping-bag"></i>
<span class="badge"></span>
<p>My Cart</p>
</a>
</li>
</ul>
</div>
<!-- End Atribute Navigation -->
</div>
<!-- Start Side Menu -->
<div class="side">
<a href="#" class="close-side"><i class="fa fa-times"></i></a>
<li class="cart-box">
<ul class="cart-list">
</ul>
</li>
</div>
<!-- End Side Menu -->
</nav>
<!-- End Navigation -->
</header>
<!-- End Main Top -->
<!-- Start Top Search -->
<div class="top-search">
<div class="container">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
</div>
</div>
</div>
<!-- End Top Search -->
<!-- Start Slider -->
<div id="slides-shop" class="cover-slides">
<ul class="slides-container">
<li class="text-center">
<img src="images/banner-01.jpg" alt="">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="m-b-20"><strong>Welcome To <br> Plasa Pestisida</strong></h1>
<p class="m-b-40">Selamat datang di website plasa pestisida <br> Jika anda ingin beli ada di panel Shop atau tekan Pilihan Shop yang dibawah ini.</p>
<p><a class="btn hvr-hover" href="shop.php">Shop New</a></p>
</div>
</div>
</div>
</li>
<li class="text-center">
<img src="images/banner-02.jpg" alt="">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="m-b-20"><strong>Welcome To <br> Plasa Pestisida</strong></h1>
<p class="m-b-40">Selamat datang di website plasa pestisida <br> Jika anda ingin beli ada di panel Shop atau tekan Pilihan Shop yang dibawah ini.</p>
<p><a class="btn hvr-hover" href="shop.php">Shop New</a></p>
</div>
</div>
</div>
</li>
<li class="text-center">
<img src="images/banner-03.jpg" alt="">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="m-b-20"><strong>Welcome To <br> Plasa Pestisida</strong></h1>
<p class="m-b-40">Selamat datang di website plasa pestisida <br> Jika anda ingin beli ada di panel Shop atau tekan Pilihan Shop yang dibawah ini.</p>
<p><a class="btn hvr-hover" href="shop.php">Shop New</a></p>
</div>
</div>
</div>
</li>
</ul>
<div class="slides-navigation">
<a href="#" class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
<a href="#" class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
</div>
</div>
<!-- End Slider -->
<!-- Start Categories -->
<div class="categories-shop">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="shop-cat-box">
<img class="img-fluid" src="images/categories_img_01.jpg" alt="" />
<a class="btn hvr-hover" href="#">Lorem ipsum dolor</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="shop-cat-box">
<img class="img-fluid" src="images/categories_img_02.jpg" alt="" />
<a class="btn hvr-hover" href="#">Lorem ipsum dolor</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="shop-cat-box">
<img class="img-fluid" src="images/categories_img_03.jpg" alt="" />
<a class="btn hvr-hover" href="#">Lorem ipsum dolor</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Categories -->
<div class="box-add-products">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="offer-box-products">
<img class="img-fluid" src="images/add-img-01.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="offer-box-products">
<img class="img-fluid" src="images/add-img-02.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- Start Products -->
<div class="products-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="title-all text-center">
<h1>Pestisida & Pupuk</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus enim.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="special-menu text-center">
<div class="button-group filter-button-group">
<button class="active" data-filter="*">All</button>
<button data-filter=".top-featured">Top featured</button>
<button data-filter=".best-seller">Best seller</button>
</div>
</div>
</div>
</div>
<div class="row special-list">
<div class="col-lg-3 col-md-6 special-grid best-seller">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="sale">Sale</p>
</div>
<img src="images/img-pro-01.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $7.79</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 special-grid top-featured">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="new">New</p>
</div>
<img src="images/img-pro-02.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $9.79</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 special-grid top-featured">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="sale">Sale</p>
</div>
<img src="images/img-pro-03.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $10.79</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 special-grid best-seller">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="sale">Sale</p>
</div>
<img src="images/img-pro-04.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $15.79</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Products -->
<!-- Start Blog -->
<div class="latest-blog">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="title-all text-center">
<h1>Blog Plasa Pestisida</h1>
<p>Disini adalah berita-berita tentang Plasa Pestisida</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="blog-box">
<div class="blog-img">
<img class="img-fluid" src="images/blog-img.jpg" alt="" />
</div>
<div class="blog-content">
<div class="title-blog">
<h3>Fusce in augue non nisi fringilla</h3>
<p>Nulla ut urna egestas, porta libero id, suscipit orci. Quisque in lectus sit amet urna dignissim feugiat. Mauris molestie egestas pharetra. Ut finibus cursus nunc sed mollis. Praesent laoreet lacinia elit id lobortis.</p>
</div>
<ul class="option-blog">
<li><a href="#"><i class="far fa-heart"></i></a></li>
<li><a href="#"><i class="fas fa-eye"></i></a></li>
<li><a href="#"><i class="far fa-comments"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="blog-box">
<div class="blog-img">
<img class="img-fluid" src="images/blog-img-01.jpg" alt="" />
</div>
<div class="blog-content">
<div class="title-blog">
<h3>Fusce in augue non nisi fringilla</h3>
<p>Nulla ut urna egestas, porta libero id, suscipit orci. Quisque in lectus sit amet urna dignissim feugiat. Mauris molestie egestas pharetra. Ut finibus cursus nunc sed mollis. Praesent laoreet lacinia elit id lobortis.</p>
</div>
<ul class="option-blog">
<li><a href="#"><i class="far fa-heart"></i></a></li>
<li><a href="#"><i class="fas fa-eye"></i></a></li>
<li><a href="#"><i class="far fa-comments"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="blog-box">
<div class="blog-img">
<img class="img-fluid" src="images/blog-img-02.jpg" alt="" />
</div>
<div class="blog-content">
<div class="title-blog">
<h3>Fusce in augue non nisi fringilla</h3>
<p>Nulla ut urna egestas, porta libero id, suscipit orci. Quisque in lectus sit amet urna dignissim feugiat. Mauris molestie egestas pharetra. Ut finibus cursus nunc sed mollis. Praesent laoreet lacinia elit id lobortis.</p>
</div>
<ul class="option-blog">
<li><a href="#"><i class="far fa-heart"></i></a></li>
<li><a href="#"><i class="fas fa-eye"></i></a></li>
<li><a href="#"><i class="far fa-comments"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Blog -->
<!-- Start Instagram Feed -->
<div class="instagram-box">
<div class="main-instagram owl-carousel owl-theme">
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-01.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-02.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-03.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-04.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-05.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-06.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-07.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-08.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-09.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="ins-inner-box">
<img src="images/instagram-img-05.jpg" alt="" />
<div class="hov-in">
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- End Instagram Feed -->
<!-- Start Footer -->
<footer>
<div class="footer-main">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-top-box">
<h3>Plasa Pestisida Buka</h3>
<ul class="list-time">
<li>Monday - Friday: 08.00am to 05.00pm</li> <li>Saturday: 10.00am to 08.00pm</li> <li>Sunday: <span>Closed</span></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-top-box">
<h3>Newsletter</h3>
<form class="newsletter-box">
<div class="form-group">
<input class="" type="email" name="Email" placeholder="Email Address*" />
<i class="fa fa-envelope"></i>
</div>
<button class="btn hvr-hover" type="submit">Submit</button>
</form>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-top-box">
<h3>Social Media</h3>
<p>Follow US</p>
<ul>
<li><a href="https://www.facebook.com/lestari.nurillahi.773/"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-widget">
<h4>About Plasa Pestisida</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-link">
<h4>Information</h4>
<ul>
<li><a href="about.php">About Us</a></li>
<li><a href="contact-us.php">Customer Service</a></li>
<li><a href="location.php">Our Sitemap</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Delivery Information</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-link-contact">
<h4>Contact Us</h4>
<ul>
<li>
<p><i class="fas fa-map-marker-alt"></i>Address: CV IndoTraco HD <br>Burujul 1 No 25 depan Airal Depot Isi Ulang<br> Nagarawangi, Cipedes, Kota Tasimalaya </p>
</li>
<li>
<p><i class="fas fa-phone-square"></i>Phone: <a href="tel:+62-89654978059">+62 896 5497 8059</a></p>
</li>
<li>
<p><i class="fas fa-envelope"></i>Email: <a href="mailto:ilham.idfiana12@gmail.com">gmail perusahaan</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<!-- Start copyright -->
<div class="footer-copyright">
<p class="footer-company">All Rights Reserved. © 2018 <a href="#">ThewayShop</a> Design By :
<a href="https://html.design/">html design</a></p>
</div>
<!-- End copyright -->
<a href="#" id="back-to-top" title="Back to top" style="display: none;">↑</a>
<!-- ALL JS FILES -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- ALL PLUGINS -->
<script src="js/jquery.superslides.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/inewsticker.js"></script>
<script src="js/bootsnav.js."></script>
<script src="js/images-loded.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/baguetteBox.min.js"></script>
<script src="js/form-validator.min.js"></script>
<script src="js/contact-form-script.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Minggu selanjutnya adalah emmbuat fungsionalitas website dan juga membuat sistem database untuk login dan juga user client.