How to add an action in a nav-link in php - php

I've a project where i need to use the MVC2 architecture. So far so good, but I'm stuck with the navigation bar.
Basically, I'm making a webpage where I have a navigation bar with different options available. When I click in one of the options, I want an "action" to be made, which would be sent to an Action Builder Class which would generate a view with the specific page.
For instance, this is my ActionBuilder class, which is in my Controler folder
<?php
require_once('./controleur/DefaultAction.class.php');
require_once('./controleur/MenuAction.class.php');
require_once('./controleur/LogginAction.class.php');
require_once('./controleur/ContactAction.class.php');
class ActionBuilder{
public static function getAction($nomAction){
switch ($nomAction)
{
case "Menu" :
return new MenuAction();
break;
case "Tarification" :
return new TarificationAction();
break;
case "Contact" :
return new ContactAction();
break;
default :
return new DefaultAction();
}
}
}
?>
Here is my css:
<form method="post" action="">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="navbar-collapse collapse show" id="navbarColor01" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" id="APropos">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="Tarification">Tarif</a>
</li>
<li class="nav-item">
<a class="nav-link" href="MenuOffert.php">Menus offert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="Contact">Nous contacter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Loggin.PHP">Se connecter</a>
</li>
</ul>
</div>
</nav>
After we clicked, for example Contacter in the navigation bar, what I need is to send an action to the controler which would call this ContactAction class:
<?php
require_once('./controleur/Action.interface.php');
class ContactAction implements Action {
public function execute(){
return "Contact";
}
}
which eventually would show the page with the info that I need.
How can I do this?
Also, do I have to set a form in the navigation bar as I did? I'm really not sure for that part.
Thank you.

add your url where you want to display the page to your navigation.
example: À propos
edit the href="#" to href="<?php echo base_url('index.php/add/your/link')"

Related

Is it possible to refresh a tab on click - Bootstrap tabs

I've created two tabs, using PHP tab one is made to insert data to database and another to view the data from the database, someone suggested ajax, but i couldn't find the answer i want.
example code -
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active">
<?php require("insert.php"); ?>
</div>
<div id="menu1" class="container tab-pane fade">
<?php require("view.php"); ?>
</div>
</div>
at tab one, i insert data (PHP) and tab two i view the data in table (PHP), so after inserting, i have to refresh the whole page to view the updated data on tab two.
So is it possible to refresh tab two right after i insert data on tab two, so i can view updated data without refreshing the whole page? if this is already solved, please comment answer links.
It may seem crude, but i made it work using JavaScript.
$(document).ready(function(){
$(".t1").load("insert.php");
$(".t2").load("view.php");
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if(target=='#home')
{
$(".t1").load("insert.php");
}
else if(target=='#profile')
{
$(".t2").load("view.php");
}
});
});
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active t1">
</div>
<div id="profile" class="container tab-pane fade t2">
</div>
</div>

CodeIgniter 4 Populating menu from database on View Layout

I'm new in CodeIgniter in general. I have a view layout, on which I have navigation menu bar in it. I want to populate the dropdown menu with categories I've saved in database.
Here's snippet of my layout (View\layouts\frontend.php):
<nav class="navbar navbar-expand-md sticky-top">
<div class="collapse navbar-collapse flex-column " id="navbar">
<!-- Brand bar -->
<a class="navbar-brand ml-3" href="#">
<span class="">Test Site</span>
</a>
<!-- Internal links Menu navbar -->
<ul class="navbar-nav justify-content-center w-100 px-3">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">News</a>
<a class="dropdown-item" href="#">Event</a>
<a class="dropdown-item" href="#">Announcement</a>
</div>
</li>
</ul>
</nav>
Now, I understand that on every views that Extends that layout, I can just do query on controller and return the view with data. Here's what I've done so far and it works.
Home Controller:
use App\Models\CategoryModel;
class Home extends BaseController
{
public function index()
{
$categoryModel = new CategoryModel();
$data['categories'] = $categoryModel->orderBy('id', 'ASC')->findAll();
return view('frontend/home_page', $data);
}
}
Part of layout:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<?php if ($categories) : ?>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<?php foreach ($categories as $category) : ?>
<a class="dropdown-item" href="#"><?php echo $category['name'] ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</li>
But it looks like I have to do that on all controllers' functions that renders my views that use my layout (frontend.php).
What I want to ask is, is there a possibility to just make a function/class/something to call so it's only done one time? What is the best practice in this situation?
If
$categoryModel = new CategoryModel();
$data['categories'] = $categoryModel->orderBy('id', 'ASC')->findAll();
is something that you plan on calling in multiple methods within that Controller, then yes it would be considered best practice to push that code off into something reusable.
You could ostensibly define this function in several different places, but in this case, a private Controller function is probably easiest (it must be private to prevent it being served by web requests):
private getCategories(){
$categoryModel = new CategoryModel();
$ret['categories'] = $categoryModel->orderBy('id', 'ASC')->findAll();
return $ret;
}
Any other function within that same Controller can then get that data by calling on
$this->getCategories().
If anyone faces the same problem, here is the way I manage it. Codeigniter has a nice feature view_cell(). You can create a separate class in Libraries folder (let's call it Menu with method display()) and there return a separate view with your menu. Then in your layout call <?= view_cell('\App\Libraries\Menu::display') ?>. This way there is no need to repeat the same code in many controllers.

Remove ACTIVE class from nav-link element in Bootstrap 4

I need to remove the ACTIVE class from nav-item when the user closes the tab. I try to build tabs with text content inside. Tabs should be closed by default when the user opens the page. When the user clicks on a tab to open it, it should change the color to blue (So here I can use the active class to add style), but when it closes, it should change the color to white. The best way would be to remove the ACTIVE class from li and I stuck here. How to do it? Unfortunately Bootstrap does not remove the ACTIVE class when I click on the tab to close it. Bootstrap removes the ACTIVE class only when I switch between tabs.
Here is my HTML:
<div class="col-md-12">
<ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#one" role="tab">One</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#two" role="tab">Two</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#three" role="tab">Three</a>
</li>
</ul>
<div class="tab-content">
<div class="text-center tab-pane" id="one" role="tabpanel">1 tab content</div>
<div class="text-center tab-pane" id="two" role="tabpanel">2 tab Content</div>
<div class="text-center tab-pane" id="three" role="tabpanel">3 tab content</div>
</div>
</div>
And here is my JS:
jQuery(function ($) {
$(".nav-link").click(function(){
if ($(this).hasClass('active')){
$('#' + this.hash.substr(1).toLowerCase()).toggleClass('active');
}
});
});
Just go over all the nav-item's and remove the class when the user closes the tab
$('.your-close-icon').on('click', function() {
$('.nav-item').removeClass('active');
});

Redirecting to another page in laravel

I have a basic navbar in my web page. When I click any nav-items I am trying to redirect the user to another page.
I have route set up for that but when I click that nav-item I am not able to redirect it.
HTML
<div class="collapse animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="{{ Route('staticController#contact') }}">link</a> </ul>
</div>
Routes.php
Route::get('/','homeScreenController#index');
Route::get('/contact','staticController#contact');
If I try to do this,I get a error message that on my homepage itself saying,
Route [staticController#contact] not defined.
but I have already defined it.
and when I do this error doesn't come but it will not take me to contact page.
<li class="nav-item"> <a class="nav-link" href="{{ ('staticController#contact') }}">link</a> </ul>
Try like this:
<a class="nav-link" href="{{ url('/contact') }}">link</a>

give link to a view in codeigniter

I am trying to give links to different pages in the menu bar. I've created views for the page and corresponding controller is created. Also code for menu bar is written separately in another view. In this view I am trying to give link. I tried giving link with base_url(), but when the page loads links after the link which I given href is not working. I tried:
<a href="<?php echo base_url();?>admember/index">
Here, admember is controller and index is my function.
My code:
header.php
<ul class="nav navbar-nav">
<li class="active">
Dashboard
</li>
<li class="menu-dropdown classic-menu-dropdown ">
<a data-hover="megamenu-dropdown" data-close-others="true" data-toggle="dropdown" href="javascript:;">
Memeber Management <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-left">
<li class=" dropdown-submenu">
<a href="<?php echo base_url();?>admember/index">
<i class="icon-briefcase"></i>
Add Member </a>
</li>
<li class=" dropdown-submenu">
<a href=":;">
<i class="icon-wallet"></i>
Edit Member </a>
</li>
<li class=" dropdown-submenu">
<a href=":;">
<i class="icon-bar-chart"></i>
Delete Memeber </a>
</li>
</ul>
</li>
</ul>
Controller admember.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class admember extends CI_Controller {
public function index()
{
$this->load->view('addmember');
}
}
Can anyone help me with this. I'm a newbie in codeigniter.
Don't forget to load $this->load->helper('url'); and think problem in base url in Codeginter.
Go to application->config->config.php and change base url example as http://yourbaseurl/

Categories