├── logo.png ├── readme.md └── index.html /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sejutaimpian/alpine-movie/HEAD/logo.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Pendahuluan 2 | 3 | Selamat malam pak Dhika dan mahasiswa WPU semuanya. Saya Eris Sulistina yang kemarin-kemarin showcase AlpineJS. Kali ini saya masih bersama AlpineJS. Yang membedakan pada projek ini adalah penggunaan API pada AlpineJS. 4 | 5 | # Tentang Aplikasi 6 | 7 | Aplikasi ini bernama Alpine-Movie. Aplikasi ini cloningan dari wpu-movie tapi dengan sedikit upgrade dan menggunakan AlpineJS. API film berasal dari [OMDB](https://www.omdbapi.com/). 8 | 9 | # Tahap Pembuatan 10 | 11 | Awalnya saya ingin mengimplementasikan .env untuk mengamankan apikey punya saya, tapi setelah mencari tahu kesana-kemari ternyata solusinya harus install package. Karena saya tidak menginginkan install package lain, maka saya terpaksa mengurungkan niat dan membiarkan apikey terlihat. 12 | 13 | Kebiasaan saya dalam ngoding biasanya mendahulukan bereksperimen membuat codingan yang menurut saya ragu apakah saya bisa membuatnya atau tidak sebelum ke desain. Dalam projek ini, saya bereksperimen fetch API, print API, dan yg berhubungan dengan API lainnya. Pada proses ini berulang kali saya menemukan error karena kurang pengetahuan terkait API dan fetch API pada Javascript. hampir saja saya menyerah. Tapi karena saya menyukai AlpineJS, saya enjoy mengerjakannya. 14 | 15 | Ngoding pakai AlpineJS menyenangkan loh (iklan, hehe) 16 | 17 | Pada proses convert design bootstrap ke Tailwind tentunya menjadi tantangan tersendiri. Tapi karena saya menyukai Tailwind, saya enjoy mengerjakannya. 18 | 19 | Perihal sedikit upgrade, saya menambahkan skeleton pada list movies dan modal movie 20 | 21 | # Teknologi 22 | 23 | 1. AlpineJS 24 | 1. TailwindCSS 25 | 1. API: omdbAPI 26 | 27 | # Repo & Demo 28 | 29 | Repo: https://github.com/sejutaimpian/alpine-movie 30 | Demo: https://alpine-movie.kid.my.id/ 31 | 32 | # Disclaimer 33 | 34 | - Dikarenakan apikey saya terlihat, dimohon untuk tidak dimanfaatkan tanpa seizin saya karena saya punya beberapa ide projek bersama omdb 35 | - Dimohon untuk tidak mengunjungi website Demo pada hari Sabtu (hari showcase projek) karena takutnya limitku habis dan tidak terpresentasikan oleh pak Dhika 36 | 37 | # Terimakasih 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Alpine-Movie 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
46 |

47 | Alpine-Movie

48 | 49 |
50 |
51 | 54 | 58 |
59 |
60 | 61 | 62 |
63 |
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 | 163 | 164 | 178 | 179 | 195 | 196 |
197 | 198 | 244 |
245 | 246 |
247 | 248 | 358 |
359 |
360 | 361 | 362 | --------------------------------------------------------------------------------