Lectures List
capscom technology computer course almora

Custom sidebar with menubar or navbar using bootstrap5

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap5 custom sidebar with menubar or navbar</title>
    <!-- bootstrap5 CDN links -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <!-- custom sidebar css -->
    <style>
        #wrapper {
            display: flex;
            align-items: stretch;
        }
        #sidebar {
            min-width: 250px;
            max-width: 250px;
        }
        #sidebar.active {
            margin-left: -250px;
        }
        .sidebar_menu {
            padding: 10px;
            text-decoration: none;
            color: white;
        }
        .sidebar_menu:hover {
            background-color: white;
            color: black;
        }
        @media screen and (min-width: 0px) and (max-width: 786px) {
            #sidebar {
                margin-left: -250px;
            }
            #sidebar.active {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="sidebar" class="bg-dark text-white">
            <div class="sidebar-header">
                <h3 class="text-center bg-white text-dark p-2">Sidebar header</h3>
            </div>

            <div class="list-group">
                <a class="dropdown sidebar_menu" href="javascript:void(0)">
                    <div href="#submenu" data-bs-toggle="collapse" aria-expanded="false">Home</div>
                    <ul class="collapse" id="submenu">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </a>
                <a href="javascript:void(0)" class="sidebar_menu">Second</a>
                <a href="javascript:void(0)" class="sidebar_menu">Third</a>
                <a href="javascript:void(0)" class="sidebar_menu">Four</a>
                <a href="javascript:void(0)" class="sidebar_menu">Five</a>
                <a href="javascript:void(0)" class="sidebar_menu">Six</a>
            </div>
        </div>
        <!-- sidebar -->

        <div id="content">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <button class="sidebarCollapse btn btn-primary">Sidebar toggle</button>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>

            <section class="p-2">
                <h1 class="entry-title">DBMS practical SQL commands</h1>
                <div class="entry-content">
                    <ol>
                        <li>Write a SQL statement to create a simple table countries including columns country_id,
                            country_name, region_id</li>
                        <li>write a SQL statement to create a resource table, insert data and display record.</li>
                        <li>Based on the employees table including columns Emp_ID, Emp_name, Address, Salary, Insert and
                            employee record and use Emp_ID as a primary key.</li>
                        <li>Write a SQL statement to create a table MEMBERS including columns first_name, last_name,
                            city, and make sure that the combination of columns first_name and last_name will be primary
                            key.</li>
                        <li>Write a sql statement to create a table countries including columns country_id, country_name
                            and region_id and make sure that the combination of columns country_id, and region_id will
                            be primary key.</li>
                        <li>Based on employee table, insert an employee record whose employee number is 1005, employee
                            name is sally johnson, salary is $58000 and dept_id is 500.</li>
                        <li>Based on the employees table, delete all employee records whose salary is greater than
                            $60,000.</li>
                        <li>Write a sql statement to create a simple table Event_plan, insert data and update plan_date
                            to 2021-04-07</li>
                        <li>write a sql statement to create a table named jobs including columns job_id, job_title,
                            min_salary, max_salary, and select job_id from jobs table.</li>
                        <li>write a sql statement to create a simple table customer, insert daeta and update
                            customer_name as chirag whose city is Delhi.</li>
                    </ol>
<h2>Solutions</h2> <p><strong>Solution1</strong></p> <p>CREATE TABLE IF NOT EXISTS countries (country_id INT(10) NOT NULL, country_name VARCHAR(255) NOT NULL, region_id INT(10) NOT NULL);</p> <p><strong>Solution 2</strong></p> <p>CREATE TABLE IF NOT EXISTS resource (name VARCHAR(255) NOT NULL, address VARCHAR(255) NOT NULL) </p> <p>INSERT INTO resource(name,address)VALUES(&#8216;amit&#8217;,&#8217;almora&#8217;)</p> <p>SELECT * FROM resource</p> <p><strong>Solution 3</strong></p> <p>CREATE TABLE IF NOT EXISTS employees(Emp_id INT(10) AUTO_INCREMENT PRIMARY KEY, Emp_name VARCHAR(255) NOT NULL, Address VARCHAR(255) NOT NULL, Salary VARCHAR(255) NOT NULL);</p> <p>INSERT INTO employees(Emp_name, Address) VALUES(&#8216;Lalit&#8217;,&#8217;Almora&#8217;);</p> <p><strong>Solution 4</strong></p> <p>CREATE TABLE IF NOT EXISTS members(first_name_last_name VARCHAR(255) PRIMARY KEY, fname VARCHAR(255) NOT NULL, lname VARCHAR(255) NOT NULL);</p> <p><strong>Solution 5</strong></p> <p>CREATE TABLE IF NOT EXISTS countries (country_id_region_id VARCHAR(255) PRIMARY KEY, country_id VARCHAR(255) NOT NULL, country_name VARCHAR(255) NOT NULL, region_id VARCHAR(255) NOT NULL);</p> <p><strong>Solution 6</strong></p> <p>INSERT INTO employees(employee_number, employee_name, salary, dept_id)VALUES(1005, &#8216;Sally johnson&#8217;, 58000, 500);</p> <p><strong>Solution 7</strong></p> <p>DELETE FROM employee Where salary>60000</p> <p><strong>Solution 8</strong></p> <p>CREATE TABLE IF NOT EXISTS Event_plan(id INT(10) AUTO_INCREMENT PRIMARY KEY, event_name VARCHAR(255), plan_date DATETIME);</p> <p>INSERT INTO Event_plan(&#8216;Marriage&#8217;,&#8217;2021-01-07&#8242;)</p> <p>UPDATE Event_plan SET plan_date=&#8217;2021-04-07&#8242; WHERE id=1</p> <p><strong>Solution 9</strong></p> <p>CREATE TABLE IF NOT EXISTS jobs(job_id INT(10) AUTO_INCREMENT PRIMARY KEY, job_title VARCHAR(255) NOT NULL, min_salary INT(10) NOT NULL, max_salary INT(10) );</p> <p>SELECT job_id FROM jobs;</p> <p><strong>Solution 10</strong></p> <p>CREATE TABLE IF NOT EXISTS customer(id INT(10) AUTO_INCREMENT PRIMARY KEY, customer_name VARCHAR(255) NOT NULL, address VARCHAR(255) NOT NULL, city VARCHAR(255) NOT NULL);</p> <p>INSERT INTO customer(cutomer_name, address, city)VALUES(&#8216;Lalit&#8217;,&#8217;almora&#8217;,&#8217;Delhi&#8217;);</p> <p>UPDATE customer SET customer_name=&#8217;chirag&#8217; WHERE city=&#8217;Delhi&#8217;;</p> </div> </section> <!-- section --> </div> <!-- content --> </div> <!-- wrapper --> </body> </html> <script type="text/javascript"> $(function () { $(document).on("click", ".sidebarCollapse", function () { $("#sidebar").toggleClass("active"); }) }) </script>
Author/Written by: Mr Hemant Singh (Founder)
Terms & Conditions CAPSCOM TECHNOLOGY Pvt. Ltd. का बेहतर रूप से संचालन करने के लिए यहॉ कुछ नियमें और शर्ते लागू है अगर आप कैप्सकॉम टैक्नोलॉजी में पढ़ रहे है तो यह आप पर लागू होता है।