Homemega/slider Admin Dashboard Using Dynamic Data via HTML CSS in apex jABER IT LTDjABER IT LTD -10:07 PM 0 Create Admin Dashboard Using Dynamic Data via HTML CSS In Oracle Apex Create Admin Dashboard Using Dynamic Data via HTML CSS In Oracle Apex 1. Create a Page, Name- Admin Dashboard in HTML and CSS 2. Create a Region -> 3. Region Type -> PL/SQL Dynamic Content -> Paste the following code 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513 <span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<!--DOCTYPE html-->'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<html lang="en" dir="ltr">'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<head>'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<meta charset="UTF-8">'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<title> Responsiive Admin Dashboard | CodingLab </title>'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<link rel="stylesheet" href="style.css">'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<meta name="viewport" content="width=device-width, initial-scale=1.0">'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'</head>'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<style> /* Googlefont Poppins CDN Link */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } .sidebar{ POSITION: FIXED; height: 100%; width: 240px; background: #0A2558; transition: ALL 0.5s ease; } .sidebar.ACTIVE{ width: 60px; } .sidebar .logo-details{ height: 80px; display: flex; align-items: center; } .sidebar .logo-details i{ font-SIZE: 28px; font-weight: 500; color: #fff; MIN-width: 60px; text-align: center } .sidebar .logo-details .logo_name{ color: #fff; font-SIZE: 24px; font-weight: 500; } .sidebar .NAV-links{ margin-top: 10px; } .sidebar .NAV-links li{ POSITION: relative; list-style: none; height: 50px; } .sidebar .NAV-links li A{ height: 100%; width: 100%; display: flex; align-items: center; text-decoration: NONE; transition: ALL 0.4s ease; } .sidebar .NAV-links li a.ACTIVE{ background: #081D45; } .sidebar .NAV-links li A:hover{ background: #081D45; } .sidebar .NAV-links li i{ MIN-width: 60px; text-align: center; font-SIZE: 18px; color: #fff; } .sidebar .NAV-links li a .links_name{ color: #fff; font-SIZE: 15px; font-weight: 400; white-SPACE: nowrap; } .sidebar .NAV-links .log_out{ POSITION: absolute; bottom: 0; width: 100%; } .home-section{ POSITION: relative; background: #f5f5f5; MIN-height: 100vh; width: calc(100% - 240px); LEFT: 240px; transition: ALL 0.5s ease; } .sidebar.ACTIVE ~ .home-section{ width: calc(100% - 60px); LEFT: 60px; } .home-section NAV{ display: flex; justify-CONTENT: SPACE-BETWEEN; height: 80px; background: #fff; display: flex; align-items: center; POSITION: FIXED; width: calc(100% - 240px); LEFT: 240px; z-INDEX: 100; padding: 0 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); transition: ALL 0.5s ease; } .sidebar.ACTIVE ~ .home-section NAV{ LEFT: 60px; width: calc(100% - 60px); } .home-section nav .sidebar-button{ display: flex; align-items: center; font-SIZE: 24px; font-weight: 500; } nav .sidebar-button i{ font-SIZE: 35px; margin-RIGHT: 10px; } .home-section nav .SEARCH-box{ POSITION: relative; height: 50px; MAX-width: 550px; width: 100%; margin: 0 20px; } nav .SEARCH-box input{ height: 100%; width: 100%; OUTLINE: NONE; background: #F5F6FA; border: 2px solid #EFEEF1; border-radius: 6px; font-SIZE: 18px; padding: 0 15px; } nav .SEARCH-box .bx-SEARCH{ POSITION: absolute; height: 40px; width: 40px; background: #2697FF; RIGHT: 5px; top: 50%; transform: translateY(-50%); border-radius: 4px; line-height: 40px; text-align: center; color: #fff; font-SIZE: 22px; transition: ALL 0.4 ease; } .home-section nav .PROFILE-details{ display: flex; align-items: center; background: #F5F6FA; border: 2px solid #EFEEF1; border-radius: 6px; height: 50px; MIN-width: 190px; padding: 0 15px 0 2px; } nav .PROFILE-details img{ height: 40px; width: 40px; border-radius: 6px; OBJECT-fit: cover; } nav .PROFILE-details .admin_name{ font-SIZE: 15px; font-weight: 500; color: #333; margin: 0 10px; white-SPACE: nowrap; } nav .PROFILE-details i{ font-SIZE: 25px; color: #333; } .home-section .home-CONTENT{ POSITION: relative; padding-top: 104px; } .home-content .overview-boxes{ display: flex; align-items: center; justify-CONTENT: SPACE-BETWEEN; flex-wrap: wrap; padding: 0 20px; margin-bottom: 26px; } .overview-boxes .box{ display: flex; align-items: center; justify-CONTENT: center; width: calc(100% / 4 - 15px); background: #fff; padding: 15px 14px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .overview-boxes .box-topic{ font-SIZE: 20px; font-weight: 500; } .home-content .box .PRICE{ display: INLINE-BLOCK; font-SIZE: 35px; margin-top: 16px; font-weight: 500; } .home-content .box .INDICATOR{ display: flex; align-items: center; margin-top: 10px; } .home-content .box .INDICATOR i{ height: 20px; width: 20px; background: #8FDACB; line-height: 20px; text-align: center; border-radius: 50%; color: #fff; font-SIZE: 20px; margin-RIGHT: 5px; } .box .INDICATOR i.DOWN{ background: #e87d88; } .home-content .box .INDICATOR .text{ font-SIZE: 12px; } .home-content .box .cart{ display: INLINE-BLOCK; font-SIZE: 32px; height: 50px; width: 50px; background: #cce5ff; line-height: 50px; text-align: center; color: #66b0ff; border-radius: 12px; margin: -3px 0 0 6px; } .home-content .box .cart.two{ color: #2BD47D; background: #C0F2D8; } .home-content .box .cart.three{ color: #ffc233; background: #ffe8b3; } .home-content .box .cart.four{ color: #e05260; background: #f7d4d7; } .home-content .total-ORDER{ font-SIZE: 20px; font-weight: 500; } .home-content .sales-boxes{ display: flex; justify-CONTENT: SPACE-BETWEEN; /* padding: 0 20px; */ } /* left box */ .home-content .sales-boxes .recent-sales{ width: 65%; background: #fff; padding: 20px 30px; margin: 0 20px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .home-content .sales-boxes .sales-details{ display: flex; align-items: center; justify-CONTENT: SPACE-BETWEEN; } .sales-boxes .box .title{ font-SIZE: 24px; font-weight: 500; /* margin-bottom: 10px; */ } .sales-boxes .sales-details li.topic{ font-SIZE: 20px; font-weight: 500; } .sales-boxes .sales-details li{ list-style: none; margin: 8px 0; } .sales-boxes .sales-details li A{ font-SIZE: 18px; color: #333; font-SIZE: 400; text-decoration: NONE; } .sales-boxes .box .button{ width: 100%; display: flex; justify-CONTENT: flex-END; } .sales-boxes .box .button A{ color: #fff; background: #0A2558; padding: 4px 12px; font-SIZE: 15px; font-weight: 400; border-radius: 4px; text-decoration: NONE; transition: ALL 0.3s ease; } .sales-boxes .box .button A:hover{ background: #0d3073; } /* Right box */ .home-content .sales-boxes .top-sales{ width: 35%; background: #fff; padding: 20px 30px; margin: 0 20px 0 0; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .sales-boxes .top-sales li{ display: flex; align-items: center; justify-CONTENT: SPACE-BETWEEN; margin: 10px 0; } .sales-boxes .top-sales li A img{ height: 40px; width: 40px; OBJECT-fit: cover; border-radius: 12px; margin-RIGHT: 10px; background: #333; } .sales-boxes .top-sales li A{ display: flex; align-items: center; text-decoration: NONE; } .sales-boxes .top-sales li .product, .price{ font-SIZE: 17px; font-weight: 400; color: #333; } /* Responsive Media Query */ @media (max-width: 1240px) { .sidebar{ width: 60px; } .sidebar.ACTIVE{ width: 220px; } .home-section{ width: calc(100% - 60px); LEFT: 60px; } .sidebar.ACTIVE ~ .home-section{ /* width: calc(100% - 220px); */ OVERFLOW: hidden; LEFT: 220px; } .home-section NAV{ width: calc(100% - 60px); LEFT: 60px; } .sidebar.ACTIVE ~ .home-section NAV{ width: calc(100% - 220px); LEFT: 220px; } } @media (max-width: 1150px) { .home-content .sales-boxes{ flex-direction: COLUMN; } .home-content .sales-boxes .box{ width: 100%; OVERFLOW-x: scroll; margin-bottom: 30px; } .home-content .sales-boxes .top-sales{ margin: 0; } } @media (max-width: 1000px) { .overview-boxes .box{ width: calc(100% / 2 - 15px); margin-bottom: 15px; } } @media (max-width: 700px) { nav .sidebar-button .dashboard, nav .PROFILE-details .admin_name, nav .PROFILE-details i{ display: NONE; } .home-section nav .PROFILE-details{ height: 50px; MIN-width: 40px; } .home-content .sales-boxes .sales-details{ width: 560px; } } @media (max-width: 550px) { .overview-boxes .box{ width: 100%; margin-bottom: 15px; } .sidebar.ACTIVE ~ .home-section nav .PROFILE-details{ display: NONE; } } </style>'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'<body>'</span><span class="pun">);</span><span class="pln"> FOR u IN </span><span class="pun">(</span><span class="pln">SELECT </span><span class="pun">(</span><span class="pln">SELECT COUNT </span><span class="pun">(</span><span class="pln">s</span><span class="pun">.</span><span class="pln">OID</span><span class="pun">)</span><span class="pln"> FROM SALES_DTLS s</span><span class="pun">,</span><span class="pln"> PURCHASE_DETALIS P WHERE s</span><span class="pun">.</span><span class="pln">PRODUCT_ID </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PRODUCT_ID AND s</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE</span><span class="pun">)</span><span class="pln"> AS </span><span class="typ">Total_Order</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">SELECT SUM </span><span class="pun">(</span><span class="pln">s</span><span class="pun">.</span><span class="pln">TOTAL</span><span class="pun">)</span><span class="pln"> FROM SALES_DTLS s</span><span class="pun">,</span><span class="pln"> PURCHASE_DETALIS P WHERE s</span><span class="pun">.</span><span class="pln">PRODUCT_ID </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PRODUCT_ID AND s</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE</span><span class="pun">)</span><span class="pln"> AS </span><span class="typ">Total_sales</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">(</span><span class="pln">SELECT SUM </span><span class="pun">(</span><span class="pln">s</span><span class="pun">.</span><span class="pln">TOTAL</span><span class="pun">)</span><span class="pln"> FROM SALES_DTLS s</span><span class="pun">,</span><span class="pln"> PURCHASE_DETALIS P WHERE s</span><span class="pun">.</span><span class="pln">PRODUCT_ID </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PRODUCT_ID AND s</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE</span><span class="pun">)</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="pun">(</span><span class="pln">SELECT SUM </span><span class="pun">(</span><span class="pln">p</span><span class="pun">.</span><span class="pln">TOTAL</span><span class="pun">)</span><span class="pln"> v_Total_Profit FROM PURCHASE_DETALIS P</span><span class="pun">,</span><span class="pln"> SALES_DTLS s WHERE s</span><span class="pun">.</span><span class="pln">PRODUCT_ID </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PRODUCT_ID AND s</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE</span><span class="pun">))</span><span class="pln"> AS </span><span class="typ">Total_Profit</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">SELECT SUM </span><span class="pun">(</span><span class="pln">t</span><span class="pun">.</span><span class="pln">STK_QNTY</span><span class="pun">)</span><span class="pln"> FROM STOCK t</span><span class="pun">,</span><span class="pln"> SALES_DTLS s WHERE s</span><span class="pun">.</span><span class="pln">PRODUCT_ID </span><span class="pun">=</span><span class="pln"> t</span><span class="pun">.</span><span class="pln">PRODUCT_ID AND s</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE </span><span class="pun">=</span><span class="pln"> t</span><span class="pun">.</span><span class="pln">PROOUCT_SIZE</span><span class="pun">)</span><span class="pln"> </span><span class="typ">Current_stock</span><span class="pln"> FROM DUAL</span><span class="pun">)</span><span class="pln"> loop htp</span><span class="pun">.</span><span class="pln">p</span><span class="pun">(</span><span class="str">'<div class="home-content"> <div class="overview-boxes"> <div class="box"> <div class="right-side"> <div class="box-topic">Total Order</div> <div class="PRICE">'</span><span class="pun">||</span><span class="pln">u</span><span class="pun">.</span><span class="typ">Total_Order</span><span class="pun">||</span><span class="str">'</div> <div class="indicator"> <i class="bx bx-up-arrow-alt"></i> <span class="text">Up from yesterday</span> </div> </div> <i class="bx bx-cart-alt cart"></i> </div> <div class="box"> <div class="right-side"> <div class="box-topic">Total Sales</div> <div class="PRICE">$'</span><span class="pun">||</span><span class="pln">u</span><span class="pun">.</span><span class="typ">Total_sales</span><span class="pun">||</span><span class="str">'</div> <div class="indicator"> <i class="bx bx-up-arrow-alt"></i> <span class="text">Up from yesterday</span> </div> </div> <i class="bx bxs-cart-add cart two" ></i> </div> <div class="box"> <div class="right-side"> <div class="box-topic">Total Profit</div> <div class="PRICE">$'</span><span class="pun">||</span><span class="pln">u</span><span class="pun">.</span><span class="typ">Total_Profit</span><span class="pun">||</span><span class="str">'</div> <div class="indicator"> <i class="bx bx-up-arrow-alt"></i> <span class="text">Up from yesterday</span> </div> </div> <i class="bx bx-cart cart three" ></i> </div> <div class="box"> <div class="right-side"> <div class="box-topic">Total Return</div> <div class="PRICE">'</span><span class="pun">||</span><span class="pln">u</span><span class="pun">.</span><span class="typ">Current_stock</span><span class="pun">||</span><span class="str">'</div> <div class="indicator"> <i class="bx bx-down-arrow-alt down"></i> <span class="text">Down From Today</span> </div> </div> <i class="bx bxs-cart-download cart four" ></i> </div> </div>'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">END</span><span class="pln"> LOOP</span><span class="pun">;</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'</body>'</span><span class="pun">);</span><span class="pln"> HTP</span><span class="pun">.</span><span class="pln">P</span><span class="pun">(</span><span class="str">'</html>'</span><span class="pun">);</span> 🔗 Demo Application- URL- Demo Application Username - demo, Pass- demo I hope everyone will like it. Please watch the full video, Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work. Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded. ================= Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks. Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work. ============================== 🙍🏾 Md jABER HOSSEN 📲 Mobile- +8801760688286 📨 Email- jaberit786@gmail.com 🌐 FB- facebook.com/mdjaber.hossen1 Please Subscribe to My Channel Many thanks for visiting the site. Then Enjoy......................... Facebook Twitter
