API tools faq
paste
Advertisement
Talithacelin

Feli Add cat

Talithacelin
May 17th, 2025
710
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Python 13.91 KB | None | 0 0
raw download clone embed print report
  1. add_cat.blade.php
  2. @extends('base.base')
  3. @section('content')
  4. <head>
  5. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  6. rel="stylesheet">
  7. <style>
  8. html,
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. width: 100%;
  13. overflow-x: hidden;
  14. background-color: #f4f4f4;
  15. }
  16. .category-container {
  17. margin-left: 235px; /* match your .sidebar width exactly */
  18. padding: 20px;
  19. /* background-color: #f4f4f4; */
  20. overflow-x: hidden;
  21. box-sizing: border-box;
  22. max-width: calc(100vw - 250px);
  23. }
  24. .category-header h2 {
  25. font-size: 25px;
  26. margin-left: 20px;
  27. margin-top: 10px;
  28. font-weight: 800;
  29. margin-bottom: 45px;
  30. }
  31. .add-cat-form {
  32. min-width: 200px;
  33. padding: 15px;
  34. background-color: #fff;
  35. border-radius: 16px;
  36. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  37. text-align: left;
  38. margin-left: 20px;
  39. }
  40. .form-group {
  41. margin-bottom: 20px;
  42. }
  43. .form-group label {
  44. font-weight: bold;
  45. display: block;
  46. margin-bottom: 6px;
  47. margin-left: 40px;
  48. margin-top: 15px;
  49. font-size: 20px;
  50. }
  51. input,
  52. select,
  53. textarea {
  54. width: 90%;
  55. padding: 5px;
  56. border: 1px solid #ccc;
  57. border-radius: 5px;
  58. font-size: 15px;
  59. padding-left: 8px;
  60. margin-left: 40px;
  61. }
  62. .form-buttons {
  63. display: flex;
  64. justify-content: center;
  65. gap: 12px;
  66. margin-top: 30px;
  67. /* text-align: center; */
  68. }
  69. .form-buttons .btn {
  70. width: 120px;
  71. }
  72. .btn {
  73. padding: 10px 24px;
  74. border-radius: 10px;
  75. border: none;
  76. cursor: pointer;
  77. font-weight: bold;
  78. text-align: center;
  79. }
  80. /* utk btton save */
  81. .save {
  82. background: #b38cf8;
  83. color: white;
  84. }
  85. /* utk btton cancel */
  86. .cancel {
  87. background: #999;
  88. color: white;
  89. }
  90. /* utk btton close di popup */
  91. .close {
  92. background: #999;
  93. color: white;
  94. }
  95. .form-buttons .cancel a, .save a, .close a {
  96. color: rgb(255, 255, 255);
  97. text-decoration: none;
  98. }
  99. .form-buttons .cancel:hover a, .save:hover a, .close:hover a {
  100. color: rgb(0, 0, 0);
  101. text-decoration: none;
  102. }
  103. /* Popup Styling */
  104. .popup-overlay {
  105. display: none;
  106. position: fixed;
  107. top: 0; left: 0;
  108. width: 100vw;
  109. height: 100vh;
  110. background: rgba(0,0,0,0.5);
  111. justify-content: center;
  112. align-items: center;
  113. z-index: 999;
  114. }
  115. .popup-content {
  116. background: white;
  117. padding: 24px;
  118. border-radius: 12px;
  119. max-width: 400px;
  120. box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  121. text-align: center;
  122. }
  123. .popup-content h2 {
  124. margin-top: 0;
  125. }
  126. /* .close-btn {
  127. margin-top: 16px;
  128. padding: 8px 16px;
  129. background: #a78bfa;
  130. border: none;
  131. color: white;
  132. border-radius: 8px;
  133. cursor: pointer;
  134. text-decoration: none;
  135. }
  136. .close-btn:hover {
  137. background: #844ae8;
  138. text-decoration: none;
  139. } */
  140. </style>
  141. </head>
  142. <div class="category-container">
  143. <div class="category-header">
  144. <h2>Add New Category</h2>
  145. </div>
  146. <div class="add-cat-form">
  147. <div class="form-group">
  148. <label>Name</label>
  149. <input type="text" placeholder="Maximum 35 characters" />
  150. </div>
  151. <div class="form-group">
  152. <label>Description</label>
  153. <textarea rows="6" placeholder="Enter the Category's Description" ></textarea>
  154. </div>
  155. <!-- Buttons -->
  156. {{-- <div class="form-buttons">
  157. <button class="btn btn-secondary">Cancel</button>
  158. <button class="btn save">Save</button>
  159. </div> --}}
  160. <div class="form-buttons">
  161. <button class="btn cancel">
  162. <a href="{{ route('category') }}">Cancel</a>
  163. </button>
  164. <button class="btn save" onclick="showPopup('popup1')">
  165. <a href="#">Save</a>
  166. </button>
  167. </div>
  168. </div>
  169. </div>
  170. <!-- Popup -->
  171. <div class="popup-overlay" id="popup1">
  172. <div class="popup-content">
  173. <h2>Science Fiction</h2>
  174. <p>Detail Category:</p>
  175. <p>Cerita yang berlatar belakang teknologi dan sains. Genre ini seringkali didasarkan pada
  176. prinsip-prinsip ilmiah yang ada atau dihipotesiskan, namun dengan sentuhan imajinatif dan fiksi.
  177. </p>
  178. <div class="form-buttons">
  179. <button class="btn close">
  180. <a href="{{ route('category') }}">Close</a>
  181. </button>
  182. </div>
  183. </div>
  184. </div>
  185. <script>
  186. function showPopup(popupId) {
  187. document.getElementById(popupId).style.display = 'flex';
  188. }
  189. function closePopup(popupId) {
  190. document.getElementById(popupId).style.display = 'none';
  191. }
  192. </script>
  193. <!-- Bootstrap Icons CDN -->
  194. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  195. @endsection
  196. category_books.blade.php
  197. @extends('base.base')
  198. @section('content')
  199. <head>
  200. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  201. rel="stylesheet">
  202. <style>
  203. html,
  204. body {
  205. margin: 0;
  206. padding: 0;
  207. width: 100%;
  208. overflow-x: hidden;
  209. background-color: #f4f4f4;
  210. }
  211. .category-container {
  212. margin-left: 235px; /* match your .sidebar width exactly */
  213. padding: 20px;
  214. background-color: #f4f4f4;
  215. overflow-x: hidden;
  216. box-sizing: border-box;
  217. max-width: calc(100vw - 250px);
  218. }
  219. .category-header h2 {
  220. font-size: 25px;
  221. margin-left: 20px;
  222. margin-top: 10px;
  223. font-weight: 800;
  224. }
  225. .custom-container {
  226. border: 2px solid #c7b3ff;
  227. border-radius: 10px;
  228. padding: 20px;
  229. margin-left: 20px;
  230. }
  231. .action-link {
  232. color: #8e44ad;
  233. text-decoration: none;
  234. }
  235. .action-link:hover {
  236. text-decoration: underline;
  237. }
  238. .icon-eye {
  239. margin-right: 5px;
  240. }
  241. .search-add {
  242. margin-left: 20px;
  243. display: flex;
  244. justify-content: space-between;
  245. align-items: center;
  246. margin-bottom: 15px;
  247. }
  248. .search-bar {
  249. position: relative;
  250. width: 550px;
  251. margin-left: 0px;
  252. margin-bottom: 10px;
  253. }
  254. .search-bar input {
  255. width: 100%;
  256. padding: 4px 50px 4px 15px;
  257. border: 1px solid #ccc;
  258. border-radius: 8px;
  259. }
  260. .search-bar i {
  261. position: absolute;
  262. right: 10px;
  263. top: 50%;
  264. transform: translateY(-50%);
  265. color: #888;
  266. }
  267. .form-buttons .btn {
  268. width: 120px;
  269. }
  270. .btn {
  271. padding: 10px 24px;
  272. border-radius: 10px;
  273. border: none;
  274. cursor: pointer;
  275. font-weight: bold;
  276. text-align: center;
  277. }
  278. /* utk btton cancel */
  279. .back {
  280. background: #999;
  281. color: white;
  282. }
  283. .form-buttons .back a{
  284. color: rgb(255, 255, 255);
  285. text-decoration: none;
  286. }
  287. .form-buttons .back:hover a{
  288. color: rgb(0, 0, 0);
  289. text-decoration: none;
  290. }
  291. .edit i{
  292. margin-left: 10px;
  293. }
  294. .edit {
  295. margin-right: 10px;
  296. }
  297. </style>
  298. </head>
  299. <div class="category-container">
  300. <div class="category-header">
  301. <h2>Books in “Arts and Photography”</h2>
  302. </div>
  303. <div class="search-add">
  304. <div class="search-bar">
  305. <input type="text" placeholder="Search by ID or title or author">
  306. <i class="fa-solid fa-magnifying-glass"></i>
  307. </div>
  308. <div class="form-buttons">
  309. <button class="btn back">
  310. <a href="{{ route('category') }}">Back</a>
  311. </button>
  312. </div>
  313. </div>
  314. <div class="custom-container bg-white">
  315. <table class="table">
  316. <thead>
  317. <tr>
  318. <th>ID</th>
  319. <th>Title</th>
  320. <th>Author</th>
  321. <th>Price</th>
  322. <th>Stock</th>
  323. </tr>
  324. </thead>
  325. <tbody>
  326. <tr>
  327. <td>PF001</td>
  328. <td>Belajar Website Pemula</td>
  329. <td>Celin Celin</td>
  330. <td>Rp. 500.000</td>
  331. <td>100</td>
  332. </tr>
  333. <tr>
  334. <td>PF001</td>
  335. <td>Belajar Website Pemula</td>
  336. <td>Celin Celin</td>
  337. <td>Rp. 500.000</td>
  338. <td>100</td>
  339. </tr>
  340. <tr>
  341. <td>PF001</td>
  342. <td>Belajar Website Pemula</td>
  343. <td>Celin Celin</td>
  344. <td>Rp. 500.000</td>
  345. <td>100</td>
  346. </tr>
  347. <tr>
  348. <td>PF001</td>
  349. <td>Belajar Website Pemula</td>
  350. <td>Celin Celin</td>
  351. <td>Rp. 500.000</td>
  352. <td>100</td>
  353. </tr>
  354. </tbody>
  355. </table>
  356. </div>
  357. </div>
  358. <!-- Bootstrap Icons CDN -->
  359. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  360. @endsection
  361. category.blade.php
  362. @extends('base.base')
  363. @section('content')
  364. <head>
  365. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  366. rel="stylesheet">
  367. <style>
  368. html,
  369. body {
  370. margin: 0;
  371. padding: 0;
  372. width: 100%;
  373. overflow-x: hidden;
  374. background-color: #f4f4f4;
  375. }
  376. .category-container {
  377. margin-left: 235px; /* match your .sidebar width exactly */
  378. padding: 20px;
  379. background-color: #f4f4f4;
  380. overflow-x: hidden;
  381. box-sizing: border-box;
  382. max-width: calc(100vw - 250px);
  383. }
  384. .category-header h2 {
  385. font-size: 25px;
  386. margin-left: 20px;
  387. margin-top: 10px;
  388. font-weight: 800;
  389. }
  390. .custom-container {
  391. border: 2px solid #c7b3ff;
  392. border-radius: 10px;
  393. padding: 20px;
  394. margin-left: 20px;
  395. }
  396. .action-link {
  397. color: #8e44ad;
  398. text-decoration: none;
  399. }
  400. .action-link:hover {
  401. text-decoration: underline;
  402. }
  403. .icon-eye {
  404. margin-right: 5px;
  405. }
  406. .search-add {
  407. margin-left: 20px;
  408. display: flex;
  409. justify-content: space-between;
  410. align-items: center;
  411. margin-bottom: 15px;
  412. }
  413. .search-bar {
  414. position: relative;
  415. width: 550px;
  416. margin-left: 0px;
  417. margin-bottom: 10px;
  418. }
  419. .search-bar input {
  420. width: 100%;
  421. padding: 4px 50px 4px 15px;
  422. border: 1px solid #ccc;
  423. border-radius: 8px;
  424. }
  425. .search-bar i {
  426. position: absolute;
  427. right: 10px;
  428. top: 50%;
  429. transform: translateY(-50%);
  430. color: #888;
  431. }
  432. .add-btn {
  433. background-color: #b18dfc;
  434. color: white;
  435. border: none;
  436. border-radius: 8px;
  437. padding: 10px 20px;
  438. font-weight: bold;
  439. cursor: pointer;
  440. margin-right: 10px;
  441. }
  442. .add-btn:hover {
  443. background-color: #996bfa;
  444. }
  445. .add-btn i {
  446. margin-right: 5px;
  447. }
  448. .edit i{
  449. margin-left: 10px;
  450. }
  451. .edit {
  452. margin-right: 10px;
  453. }
  454. </style>
  455. </head>
  456. <div class="category-container">
  457. <div class="category-header">
  458. <h2>Category List</h2>
  459. </div>
  460. <div class="search-add">
  461. <div class="search-bar">
  462. <input type="text" placeholder="Search by ID or title or author">
  463. <i class="fa-solid fa-magnifying-glass"></i>
  464. </div>
  465. <a href="{{ route('add-category') }}">
  466. <button class="add-btn">
  467. <i class="bi bi-plus-lg"></i> Add New Category
  468. </button>
  469. </a>
  470. </div>
  471. <div class="custom-container bg-white">
  472. <table class="table">
  473. <thead>
  474. <tr>
  475. <th>ID</th>
  476. <th>Name</th>
  477. <th>Total Books</th>
  478. <th>Action</th>
  479. </tr>
  480. </thead>
  481. <tbody>
  482. @foreach ($category as $cat)
  483. <tr>
  484. <td>{{ $cat['id'] }}</td>
  485. <td>{{ $cat['nama_category'] }}</td>
  486. <td>{{ $cat['total_books'] }}</td>
  487. <td>
  488. <a href="{{ route('category-books') }}" class="action-link viewAll"><i class="bi bi-eye
  489. icon-eye"></i>View All Books</a>
  490. <a href="{{ route('edit-category') }}" class="text-primary edit"><i class="fa-solid fapen"></i>Edit</a>
  491. <a href="{{ route('category', ['delete_id' => $cat['id']]) }}" onclick="return
  492. confirm('Yakin ingin menghapus?')" class="text-danger delete"><i class="fa-solid fatrash"></i>Delete</a>
  493. </td>
  494. </tr>
  495. @endforeach
  496. </tbody>
  497. </table>
  498. </div>
  499. </div>
  500. <!-- Bootstrap Icons CDN -->
  501. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  502. @endsection
  503. edit_cat.blade.php
  504. @extends('base.base')
  505. @section('content')
  506. <head>
  507. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  508. rel="stylesheet">
  509. <style>
  510. html,
  511. body {
  512. margin: 0;
  513. padding: 0;
  514. width: 100%;
  515. overflow-x: hidden;
  516. background-color: #f4f4f4;
  517. }
  518. .category-container {
  519. margin-left: 235px; /* match your .sidebar width exactly */
  520. padding: 20px;
  521. /* background-color: #f4f4f4; */
  522. overflow-x: hidden;
  523. box-sizing: border-box;
  524. max-width: calc(100vw - 250px);
  525. }
  526. .category-header h2 {
  527. font-size: 25px;
  528. margin-left: 20px;
  529. margin-top: 10px;
  530. font-weight: 800;
  531. margin-bottom: 45px;
  532. }
  533. .add-cat-form {
  534. min-width: 200px;
  535. padding: 15px;
  536. background-color: #fff;
  537. border-radius: 16px;
  538. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  539. text-align: left;
  540. margin-left: 20px;
  541. }
  542. .form-group {
  543. margin-bottom: 20px;
  544. }
  545. .form-group label {
  546. font-weight: bold;
  547. display: block;
  548. margin-bottom: 6px;
  549. margin-left: 40px;
  550. margin-top: 15px;
  551. font-size: 20px;
  552. }
  553. input,
  554. select,
  555. textarea {
  556. width: 90%;
  557. padding: 5px;
  558. border: 1px solid #ccc;
  559. border-radius: 5px;
  560. font-size: 15px;
  561. padding-left: 8px;
  562. margin-left: 40px;
  563. }
  564. .form-buttons {
  565. display: flex;
  566. justify-content: center;
  567. gap: 12px;
  568. margin-top: 30px;
  569. /* text-align: center; */
  570. }
  571. .form-buttons .btn {
  572. width: 120px;
  573. }
  574. .btn {
  575. padding: 10px 24px;
  576. border-radius: 10px;
  577. border: none;
  578. cursor: pointer;
  579. font-weight: bold;
  580. text-align: center;
  581. }
  582. /* utk btton save */
  583. .save {
  584. background: #b38cf8;
  585. color: white;
  586. }
  587. /* utk btton cancel */
  588. .cancel {
  589. background: #999;
  590. color: white;
  591. }
  592. .form-buttons .cancel a, .save a {
  593. color: rgb(255, 255, 255);
  594. text-decoration: none;
  595. }
  596. .form-buttons .cancel:hover a, .save:hover a {
  597. color: rgb(0, 0, 0);
  598. text-decoration: none;
  599. }
  600. </style>
  601. </head>
  602. <div class="category-container">
  603. <div class="category-header">
  604. <h2>Edit Category</h2>
  605. </div>
  606. <div class="add-cat-form">
  607. <div class="form-group">
  608. <label>Name</label>
  609. <input type="text" placeholder="Maximum 35 characters" />
  610. </div>
  611. <div class="form-group">
  612. <label>Description</label>
  613. <textarea rows="6" placeholder="Enter the Category's Description" ></textarea>
  614. </div>
  615. <div class="form-buttons">
  616. <button class="btn cancel">
  617. <a href="{{ route('category') }}">Cancel</a>
  618. </button>
  619. <button class="btn save">
  620. <a href="{{ route('category') }}">Save</a>
  621. </button>
  622. </div>
  623. </div>
  624. </div>
  625. <!-- Bootstrap Icons CDN -->
  626. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  627. @endsection
  628. Routing: web.php
  629. Route::get('/category', [StoreController::class, 'show_category'])
  630. ->name('category');
  631. Route::get('/categorybooks', [StoreController::class, 'show_category_books'])
  632. ->name('category-books');
  633. Route::get('/add-category', [StoreController::class, 'show_add_category'])
  634. ->name('add-category');
  635. Route::get('/edit-category', [StoreController::class, 'show_edit_category'])
  636. ->name('edit-category');
  637. Controller: StoreController
  638. public function show_category_books(){
  639. return view('category.category_books',[
  640. 'title' => 'Category Books'
  641. ]);
  642. }
  643. public function show_add_category(){
  644. return view('category.add_cat',[
  645. 'title' => 'Add Category'
  646. ]);
  647. }
  648. public function show_edit_category(){
  649. return view('category.edit_cat',[
  650. 'title' => 'Edit Category'
  651. ]);
  652. }
  653. public function show_category(Request $request)
  654. {
  655. $category = [
  656. ['id' => 1, 'nama_category' => 'Arts & Photography', 'total_books' => 10],
  657. ['id' => 2, 'nama_category' => 'Non-Fiksi', 'total_books' => 5],
  658. ['id' => 3, 'nama_category' => 'Biografi', 'total_books' => 7],
  659. ];
  660. // Kalau ada request ID untuk dihapus
  661. if ($request->has('delete_id')) {
  662. $deleteId = $request->input('delete_id');
  663. // Filter data yang tidak sesuai dengan ID yang dihapus
  664. $category = array_filter($category, function ($cat) use ($deleteId) {
  665. return $cat['id'] != $deleteId;
  666. });
  667. // Reset index array
  668. $category = array_values($category);
  669. }
  670. return view('category.category', compact('category'));
  671. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!