Skip to main content

EAS MPPL - Demo dan Dokumentasi EAS

 EAS MPPL 2021 Pada kesempatan ini kelompok kami akan menjelaskan salah satu produk perangkat lunak milik Zoho yaitu Zoho Marketing Automation yang dikerjakan secara berkelompok yang beranggotakan: Ricky Supriyanto 05111940000036 Arvel Gavrilla R 05111940000040 M Arif Faizin 05111940000060 Zulfiqar Fauzul Akbar 05111940000101 Raihan Alifianto 05111940000213 Dengan hasil sebagai berikut 1. Deskripsi Produk 2. Manajemen Ruang Lingkup 3. Manajemen Waktu 4. Manajemen Biaya 5. Manajemen Resiko 6. Video demo
Post a Comment

Tugas 9 PBKK - Laravel : Membuat Landing Page

Pada postingan kali ini, akan membahas membuat landing page menggunakan Laravel 8. Pada postingan ini saya akan mencoba membuat Landing Page dari Dicoding Indonesia (dicoding.com) dengan tampilan yang berbeda. Langsung saja ikuti langkah-langkah berikut:

  1. Pertama, buat sebuah view baru pada resources/views/ dengan nama homepage.blade.php lalu isi dengan kode berikut:
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Dicoding - Bangun Karirmu sebagai Developer Profesional</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Bootstrap 5 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <!-- Icon -->
        <link rel="shortcut icon" href="{{ url('favicon.ico') }}" type="image/x-icon">
        <!-- Styles -->
        <link href="{{ url('css/style.css') }}" rel="stylesheet" />

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased"></body>
</html>

    Kode tersebut akan memanggil Bootstrap 5 sebagai framework utama dalam menyusun tampilan pada projek ini
  2. Kemudian tambahkan kode berikut pada body dari halaman homepage sebagai konten utama dalam homepage
      1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
            <!-- Navigation-->
        <nav id="navbar_top" class="navbar navbar-light fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#"><img class="custom-logo" src="{{ url('img/logo_inverted_transparent.png') }}" alt="Logo Dicoding" width="204" height="71"></a>
                <div>
                    <a class="btn fs-6 text-white" href="#">Produk</a>
                    <a class="btn fs-6 text-white" href="#">Blog</a>
                    <a class="btn fs-6 text-white" href="#">Hubungi Kami</a>
                    <a class="btn fs-6 text-white" href="#">Tentang Kami</a>
                </div>
            </div>
        </nav>
        <main>
            <section class="w-full min-vh-100 bg-gradient-theme">
                <div class="d-flex vh-100 container justify-content-center align-items-center">
                    <div class="text-white">
                        <h1>Bangun Karirmu sebagai</h1>
                        <h2 class="p-3 bg-white" style="color: #2D3E50;">Programmer Handal!</h2>
                        <p class="fs-5">Jadilah tuan rumah di negeri sendiri dengan belajar langsung dari para inovator dan developer expert</p>
                    </div>
                    <div class="d-none d-sm-block">
                        <img class="h-auto mw-100" src="{{ url('img/home_icon.png') }}" alt="">
                    </div>
                </div>
                <div class="shape shape-bottom">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
                        <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
                        c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
                        c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                    </svg>
                </div>
            </section>
            <section class="container p-3 mt-4">
                <div class="text-center">
                    <h2>4 Pilar yang Dapat Kamu Manfaatkan</h2>
                    <p>Berikut ini adalah 4 pilar yang kami siapkan untuk membantumu membangun karir sebagai developer profesional.</p>
                </div>
                <div class="my-4">
                    <div class="row text-center">
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-academy.png') }}" alt="">
                                <h3>Academy</h3>
                                <p>Belajar menggunakan kurikulum yang telah divalidasi industri IT internasional seperti Google, Microsoft, dan LINE. Diskusikan Code yang kamu tulis dengan para Expert.</p>
                            </div>
                        </div>
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-challenge.png') }}" alt="">
                                <h3>Challenge</h3>
                                <p>Uji kemampuanmu dengan mengikuti Challenge yang diselenggarakan oleh perusahaan IT nasional dan multi-nasional.</p>
                            </div>
                        </div>
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-event.png') }}" alt="">
                                <h3>Event</h3>
                                <p>Bangun jejaring luas. Temui langsung para pelaku IT untuk saling berbagi dan belajar. Cari Event terdekat dari kotamu.</p>
                            </div>
                        </div>
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-job.png') }}" alt="">
                                <h3>Job Platform</h3>
                                <p>Cari lowongan pekerjaan khusus developer. Untuk perusahaan, temukan talenta digital yang Anda butuhkan. Bersama membangun ekosistem IT Indonesia.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="w-full mt-3 bg-gradient-theme position-relative">
                <div class="shape shape-top">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
                        <path class="shape-fill" d="M0,6V0h1000v100L0,6z"></path>
                    </svg>
                </div>
                <div class="container p-3">
                    <div class="text-white text-center" style="margin-top: 6rem;">
                        <h2>Partner Kami</h2>
                        <p>Dicoding bekerjasama dengan perusahaan teknologi dunia untuk membangun ekosistem IT Indonesia.</p>
                    </div>
                    <div class="mt-4" style="margin-bottom: 6rem;">
                        <div class="row">
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/alcatel_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/aws-educate_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/google_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/ibm_logo.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/indosat_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/line_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/microsoft_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/samsung_logo.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shape shape-bottom">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
                        <path class="shape-fill" d="M738,99l262-93V0H0v5.6L738,99z"></path>
                    </svg>
                </div>
            </section>
            <section class="mt-3">
                <div class="container p-3">
                    <div class="text-center" style="margin-bottom: 6rem;">
                        <h2>Alumni Dicoding Academy</h2>
                        <p>Dicoding Academy telah memiliki 33962 alumni yang saat ini bekerja di berbagai perusahaan teknologi atau sebagai co-founder startup digital.</p>
                    </div>
                </div>
            </section>
        </main>
        <footer class="bg-dark p-3">
            <p class="text-white text-center">Copyright 2021 - Dicoding by Muhammad Arif Faizin</p>
        </footer>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                window.addEventListener('scroll', () => {
                    navbar = document.querySelector('#navbar_top');
                    if(window.scrollY > 100) {
                        navbar.style.backgroundColor = "#2D3E50";
                    } else {
                        navbar.style.backgroundColor = "transparent";
                    }
                })
            })
        </script>
  3. Lalu buat file style.css pada public/css/ dan isikan kode berikut:
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    *, ::after, ::before {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.custom-logo {
    max-height: 50px;
    width: auto;
}

img {
    max-width: 100%;
    height: auto;
}

.shape {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    direction: ltr;
}

.shape-bottom {
    bottom: -1px;
    transform: rotate(180deg);
}

.shape-top {
    top: -1px;
}

.shape-fill {
    fill: #fff;
}

.bg-gradient-theme {
    background-image: radial-gradient(at top right, #FF5483 0%, #2D3E50 100%);
}
  4. Kemudian upload aset-aset pada website dan sesuaikan penamaannya pada kode


  5. Kemudian jalankan projek tersebut dengan menggunakan perintah php artisan serve pada command-line
  6. Hasil tampilan dari landing page tersebut adalah seperti berikut




Sekian postingan kali ini, mohon maaf apabila ada kekurangan dan semoga bermanfaat.

Comments

Post a Comment

Popular posts from this blog

Tugas 1 PBKK - Portofolio Aplikasi Framework

Berikut beberapa aplikasi yang pernah dibuat menggunakan bantuan framework : Kulturan Link Website Kulturan merupakan aplikasi berbasis website yang dapat digunakan oleh pekerja seni, drama, dan tari untuk mempromosikan serta memperjualbelikan karyanya secara online. Pengguna dapat membeli hasil karya pekerja seni berupa hasil pementasan atau pertunjukkan seniman di Indonesia. Framework : ReactJS, ExpressJS, Node.js dan Material UI Screenshot tampilan :  Medify.id Link Website Medify.id merupakan salah satu aplikasi berbasis website yang merupakan website dari perusahaan Medify. Website ini menyediakan informasi-informasi penting serta fitur-fitur yang ditawarkan oleh Medify. Framework : Bootstrap, Laravel 8 Screenshot tampilan : Presto Link Website Presto merupakan aplikasi berbasis website yang berisi daftar restoran terdekat beserta detailnya. Dalam website ini, pengguna juga bisa berkomentar di masing-masing restoran, dan juga menambahkan restoran ke dalam daftar favoritnya. Fr...
Post a Comment
Read more

Tugas 10 PWEB - Menambahkan Upload File pada PHP

Pada postingan ini, saya akan menjelaskan cara menambahkan upload file menggunakan PHP Buat beberapa file untuk menerapkan fungsi PHP sebagai untuk dapat menerapkan fungsi CRUD nya config.php index.php form-daftar.php proses-pendaftaran.php list-siswa.php form-edit.php proses-edit.php hapus.php cetak.php Berikut adalah beberapa tampilan hasil dari operasi menggunakan PHP tersebut Halaman Utama Halaman pendaftaran Tampilan ketika berhasil mendaftar Halaman daftar siswa yang mendaftar Halaman edit data pendaftar Tampilan ketika mencetak bukti pendaftaran Sekian postingan kali ini, terima kasih.
Post a Comment
Read more

EAS PWEB - Pemrograman Web

  Pada postingan ini, saya akan menjelaskan hasil pengerjaan EAS yang telah saya kerjakan   Dan berikut adalah hasil desain rancangan prototipe dari aplikasi yang akan dibuat
Post a Comment
Read more