My Question How i put my code to Models and Controler Codeigniter4 - codeigniter-4

i make navbar dinamic from my table i want to take my code view to models and controler but i stuck in there i just can created in my view
My code
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<?php
$db = \Config\Database::connect();
$builder = $db->table('navbar');
$navbar = $builder->where('parent_id', '0')->where('status', '1')->orderBy('id_nav', 'ASC')->get()->getResultArray();
?>
<?php foreach ($navbar as $menu) : ?>
<?php
$db = \Config\Database::connect();
$builder = $db->table('navbar');
$subnav = $builder->where('parent_id', $menu['id_nav'])->where('status', '1')->orderBy('id_nav', 'ASC')->get()->getResultArray();
?>
<?php if ($subnav != Null) : ?>
<?php foreach ($subnav as $nav) : ?>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?= $menu['nav_name']; ?></a>
<div class="dropdown-menu" aria-labelledby="dropdown" style="border: 0px solid; background:#f8f9f9;">
<a class="dropdown-item" href="#"><?= $nav['nav_name']; ?></a>
</div>
</li>
<?php endforeach ?>
<?php else : ?>
<li class="nav-item active">
<a class="nav-link" href="#"><?= $menu['nav_name']; ?> <span class="sr-only">(current)</span></a>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
<form class="form-inline my-2 my-md-0">
<a class="navbar-brand" href="">
<button class="btn btn-sm btn-outline-danger my-2 my-sm-0" type="submit">LOGIN</button>
<button class="btn btn-sm btn-outline-success my-4 my-sm-0" type="submit">JOIN ME</button>
</a>
</form>
</div>
</div>
</nav>
code
My Question How i put my code to Models and Controler Codeigniter4

This might help you get started How to
Read the documentation it explains everything now that it was updated.
Moreover it seems that you do not have any idea what an MVC pattern is since you are loading the db in the view. I might start from there. Model-View-Controller

Related

ASP.Net Core MVC Layout Issue

I have created a layout page which has a top menu and a side navbar. My problem is when I've created a new razor view (content page). It seems to be centering from the whole page not taking into account the sidebar. Also my div container in my content page does not user all the screen. Am I missing something. I thought if I create my layout page with a side bar the content page would use the remaining page.
Thanks for any help,
Layout Code:-
<body>
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
</ul>
<ul class="navbar-nav ml-auto">
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
#*Sidebar*#
<div id="sidebar-wrapper">
</div>
<div class="container mt-3 mb-3">
#RenderBody()
</div>
#RenderSection("Styles", required: false)
#RenderSection("scripts", required: false)
</body>
I've added an image of the layout I am trying to achieve.
You can try this code below:
<div class="row">
<div class="col-md-3">
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-pills flex-column">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
Result:

linking on bootstrap dropdown not working

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="bags" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More <i class="fas fa-angle-down ml-3"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
here is the code for dropdown
.dropdown-toggle::after {
display: none;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
this is the css for displaying dropdown on hover
clicking on the link doesnt navigate to the page...
i am using express as the backend n typing the link in the navbar works but not clicking the link..
i tried adding data-target but also doesnt seems to work..
i treid setting pointer-event to auto but tat also doesnt deems to work..
Try using data-hover="dropdown" aria-haspopup="true" aria-expanded="false"
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="services.html">SERVICES</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
This link might be a help.
Bootstrap Dropdown Hover
Wrap the dropdown's trigger and the dropdown menu within .dropdown as it is important. Add data-hover="dropdown" to the main action button or link to activate hover event.
Keypoint is to add data-hover="dropdown"
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
...
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>

Dynamic Tab + bootstrap + angular5

I am new to Front-End and angular part. I need to load tabs dynamically from what it returned from Backend...
Consider i am getting an array as like below :
*["tab1","tab2","tab3"].*
I have show tabs in a page with tab1, tab2, tab3.
What i have tried is hardcoded , its working,
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" >
<li class="active"><b>tab1</b></li>
<li><b>tab2</b></li>
<li><b>tab3</b></li>
<li><b>tab4</b></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab_1"> </div>
<div class="tab-pane active" id="tab_2"> </div>
<div class="tab-pane active" id="tab_3"> </div>
<div class="tab-pane active" id="tab_4"> </div>
</div>
Also i have to make sure that on click of the tab it should call a method with clicked name. All should be dynamic. Please suggest your ideas.Thanks.
you have to change href="#id" to data-target="#id"
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" >
<li class="active"><a data-target="#tab_1" data-toggle="tab" (click)="loadData('abc')"><b>tab1</b></a></li>
<li><a data-target="#tab_2" data-toggle="tab" (click)="loadData('xxx')"><b>tab2</b></a></li>
<li><a data-target="#tab_3" data-toggle="tab" (click)="loadData('xyz')"><b>tab3</b></a></li>
<li><a data-target="#tab_4" data-toggle="tab" (click)="loadData('fgfgfg')"><b>tab4</b></a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab_1"> </div>
<div class="tab-pane active" id="tab_2"> </div>
<div class="tab-pane active" id="tab_3"> </div>
<div class="tab-pane active" id="tab_4"> </div>
</div>
I achieved such functionality using ngx-Bootstrap
Array of tabs:
tabs: any[] = [{
title: 'Dynamic Title 1',
content: 'Dynamic content 1'
},
{
title: 'Dynamic Title 2',
content: 'Dynamic content 2'
},
{
title: 'Dynamic Title 3',
content: 'Dynamic content 3',
removable: true
}
];
Display tabs:
<tabset>
<tab heading="Static title">Static content</tab>
<tab *ngFor="let tabz of tabs"
[heading]="tabz.title"
[active]="tabz.active"
(select)="tabz.active = true"
[disabled]="tabz.disabled"
[removable]="tabz.removable"
(removed)="removeTabHandler(tabz)"
[customClass]="tabz.customClass">
{{tabz?.content}}
</tab>
</tabset>
Check full usage here.
So, there are different ways of implementing it. One way as suggested by #Comann will definitely work. The other way of doing the same thing would be installing bootstrap dependency - try doing
npm install --save bootstrap
Import this in your styles.css file
#import '~bootstrap/dist/css/bootstrap.css';
You can also import it in your angular.json file assuming you might have generated the project using angular-cli. I prefer it to be in styles.css.
Create a separate navbar component and in the template
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/route1">Route1<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/route2">Route 2</a>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
Instead of having the two router links hard coded you will loop around with *ngFor on the array of tabs and populate it. Hope this helps.

how to add attributed to nav bootstrap menues with fuel cms 1.3.1

I am trying to work with nav section and newly discovering it
now i want to generate an menu like following :
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>about us</li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Products 1</li>
<li>Products 2</li>
<li>Products 3</li>
</ul>
</li>
<li>Product Support</li>
<li>Contact</li>
</ul>
</div>
With the code :
<?php echo $nav_arr = fuel_nav(array('depth'=>4
,'render_type' => 'basic'
, 'group_id' => 1
,'container_tag_attrs' => array('style' => '')
,'container_tag_class' => 'nav navbar-nav menuright'
,'order' => 'precedence'
,'subcontainer_tag_class'=>array('dropdown-menu', 'styles' => array(0 => array(1 => 'dropdown')))
)); ?>
but cant getting the way to do the changes specially in this section
<li class="dropdown">
Products <span class="caret"></span>
the out put i am getting as follow :
<div id="navbar" class="navbar-collapse collapse">
<ul style="" class="nav navbar-nav menuright">
<li class="first">Home</li>
<li>about us</li>
<li class="active"><a href="http://localhost/site/product" product-1>Product</a>
<ul style="" class="dropdown-menu">
<li class="first active">Product 1</li>
<li class="last">product-2</li>
</ul>
</li>
<li>Product Support</li>
<li class="last">Contact</li>
</ul>
</div>
can one please help me out ????please view the source code of those list
You can use array as render_type to manually generate desired tag.
Here is a example code:
<div class="collapse navbar-collapse">
<?php
$nav = fuel_nav(array('render_type' => 'array' ));
?>
<ul class="nav navbar-nav">
<?php foreach($nav as $uri=>$item):
$classes='';
$dropdown='';
if($item['nav_key'] == $page_code) $classes .=' active';
if(!empty($item['children'])) {
$classes .=' dropdown';
$dropdown ='class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"';
}
?>
<li class="<?=$classes?>">
<a href="<?=BASE_URL?><?=$item['location']?>" <?=$dropdown?> ><?=$item['label']?></a>
<?php if(!empty($item['children'])):?>
<ul class="dropdown-menu">
<?php foreach($item['children'] as $suburl=>$sub_item): ?>
<li>
<a href="<?=BASE_URL?><?=$sub_item['location']?>">
<?=$sub_item['label']?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>

How do I select a JS tab in watir-webdriver?

I have a webpage which has tab list, the HTML looks like this for this piece:
<div id="content">
<div class="col span-6">
<div class="section first no-border">
<h2>New Search</h2>
<ul class="tabs clear">
<li id="simple-li" class="current">
<a onclick="switch_search_type('SimpleSearch');; return false;" href="#">Simple</a>
</li>
<li id="structured-li">
<a onclick="redirect_to_search('/search/structured_searches/new'); return false;" href="#">Wizard</a>
</li>
<li id="advanced-li" class="">
</li>
<li id="custom-li" class="">
<a onclick="switch_search_type('ComplexQuerySearch');; return false;" href="#">Custom</a>
</li>
</ul>
<div class="tabbed-panel">
I want to select the "Custom" item in this tab list. I tried multiple things but have failed, some of the things I tried:
browser.li(:id, "custom-li").click
browser.select_list(:id, "custom-li").set("Custom")
browser.link(:xpath, "id('custom-li')/x:a").click
browser.select_list(:id => 'custom-li').select "Custom"
I am new to watir-webdriver. Any feedback and help is greatly appreciated.
Try this:
browser.a(:text => "Custom").click

Resources