I have found a lot of tutorials but none of them are worked. in my case i have an array of fonts returned from googlefontapi and i'm print it in page successfully
now i want only 10 fonts loaded first time and others on scrolling my code
public function index(){
$url = "https://www.googleapis.com/webfonts/v1/webfonts?key=!";
$result = json_decode(file_get_contents( $url ));
$font_list = "";
foreach ( $result->items as $font )
{
$font_list[] = [
'font_name' => $font->family,
'category' => $font->category,
'variants' => implode(', ', $font->variants),
// subsets
// version
// files
];
}
return view('website_settings')->with('data', $font_list);
}
the view file
<div class="am-fonts">
<ul class="am-fonts-list">
#foreach($data as $fonts)
<li class="abc">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=<?php echo $fonts['font_name'];?>:<?php echo $fonts['variants'];?>">
<div class="am-actions"><span><i class="icon add"></i></span></div>
<div class="am-font-preview" style="font-family: <?php echo $fonts['font_name'];?>;">
Grumpy wizards make toxic brew for the evil Queen and Jack.
</div>
<div class="am-font-details">
<div class="am-font-name">{!! $fonts['font_name'] !!}</div>
<div>12 styles</div>
</div>
</li>
#endforeach
</ul>
</div>
Related
Do get the question clear, to make it clear let me elaborate; what i need to achieve is that i have a page where pagination is going forward -working and when ever i paginate the page, page goes to the top of the page since it did refresh but i need it to stay at the div where pagination links are at. The content area where the pagination content is so, that it may appear that page did not load only content was updated.
Do get the point.
code as follows:
<div class="large-12 columns" id="paginate" style="border-right: 1px solid #E3E5E8; height: 572px;">
<article>
<hr><div class="row">
<div class="large-6 columns">
<?php
//stories complete do not edit.
foreach($stories as $story){
echo '
<p>'.$this->Html->image($story['image'].'.jpg', ['alt'=>'image for article']).'</p>
</div>
<div class="large-6 columns">
<h5>'.$story['title'].'</h5>
<p>
<span><i class="fi-torso"> Creator: '.$story['creator'].' </i></span>
<span><i class="fi-calendar"> '.$story['created'].' </i></span>
</p>
<p>'.$story['story'].'</p>';
//same place after pagination
//
}
?>
</div>
<div style="padding: 2px;float: left;margin-top: 31%;margin-left: -1206px;">
<ul class="pagination" role="navigation" aria-label="Pagination">
<li><?php echo $this->Paginator->prev(' < ' . __(''));?></li>
<li><?php echo $this->Paginator->numbers();?></li>
<li><?php echo $this->Paginator->next(' > ' . __(''));?></li>
</ul>
</div>
</div><hr>
</article>
</div>
According to the code and earlier Cakephp code we were able to add a link to div with paginator and it would take us direct to a specific div, i can't figure out syntax to do that with cakephp-4.x so be kind and give your best solution with least amount of code.
I have found a solution to problem. That is far constructive than any other solution one can find anywhere from internet. I will describe code and put code snippet so that everyone and anyone is able to do so with just a read from my code snippet.
First Declare Pagination for a specific Model. After that Initialise Paginator code snippet. Once you have done above mention so, load and Query paginator to given model.
After that Set variable along with compact.
At template side make sure you have followed above mention process all your given code will be assigned at controller end and works at template side automatically. I put that code for template at bottom of snippet take a good read and implement your code where ever and when ever there is request and response among controller and template.
Put below code to controller:
public $paginate = [
'Stories' => ['scope' => 'story',
'limit' => 1,
]
];
public function initialize(): void
{
parent::initialize();
$this->loadComponent('Paginator');
}
public function index()
{
// Paginate property
$this->loadComponent('Paginator');
$stories = $this->paginate($this->Stories->find('all', ['scope' => 'story']));
$this->set(compact('employers'));
}
Below code to Template:
<div class="column" id="success_story">
<hr>
<h4 style="margin: 0;" class="text-center">SUCCESS STORIES</h4>
<hr>
</div>
<?php
//stories complete do not edit.
foreach($stories as $story){
echo '
<p>'.$this->Html->image($story['image'].'.jpg', ['alt'=>'image for article']).'</p>
</div>
<div class="large-6 columns">
<h5>'.$story['title'].'</h5>
<p>
<span><i class="fi-torso"> Creator: '.$story['creator'].' </i></span>
<span><i class="fi-calendar"> '.$story['created'].' </i></span>
</p>
<p>'.$story['story'].'</p>
';
}
?>
<div style="padding:0px;margin:0px;margin-bottom: -35px;">
<ul class="pagination" role="navigation" aria-label="Pagination">
<li><?php echo $this->Paginator->prev(' < ' . __(''));?></li>
<li><?php echo $this->Paginator->next(' > ' . __(''));?></li>
</ul>
</div>
put a link to success_story(div) as #(indicator)
I have this html code
<body>
<div class="wrapper">
<div class="banner">
</div>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>News</li>
<li>Registration FAQs</li>
<li>How to Register and Rules</li>
<li>Register school</li>
<li>Register pupil</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="content_area">
**<?php echo $content; ?>**
</div>
<div class="clear"></div>
</div>
<div class="footer">
<div>
</div>
</div>
</body>
now once the user clicks the links i want to load the content depending on which link he has clicked as you can see inn the code above. I can load the content as long as its all html but now that php tags are included i find it hard. how do i load the content with the following data?
<div id="form_input">
<?php
echo form_open('form/data_submitted');
// Show Name Field in View Page
echo form_label('User Name :', 'u_name');
$data= array(
'name' => 'u_name',
'placeholder' => 'Please Enter User Name',
'class' => 'input_box'
);
echo form_input($data);
// Show Email Field in View Page
echo form_label('User email:', 'u_email');
$data= array(
'type' => 'email',
'name' => 'u_email',
'placeholder' => 'Please Enter Email Address',
'class' => 'input_box'
);
echo form_input($data);
?>
</div>
// Close Form
<?php echo form_close();?>
is it possible?
I would suggest the following:
Your Controller:
class Site extends CI_Controller
{
public function home()
{
$arrViewData = array
(
"content" = $this->load->view("site/home","",true)
);
$this->load->view("index", $arrViewData);
}
}
your view called i.e. index
<html>
<body>
<div class="wrapper">
<div class="banner">
</div>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>News</li>
<li>Registration FAQs</li>
<li>How to Register and Rules</li>
<li>Register school</li>
<li>Register pupil</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="content_area">
<?= $content; ?>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<div>
</div>
</div>
</body>
</html>
your view called home.php in views/site/
hello i'm home
with this method i think you can achieve what you want if i understand you correctly
as a side note: this is an example - but you should be able to see the point
You might want to consider breaking your view html into a smaller "snippets". CodeIgniter (CI) makes it easy to load them in the order you want and then "show" them all at once.
One possible breakdown of views into snippets follows.
header_view.php
<!DOCTYPE HTML>
<html>
<head>
<title>
<?= (isset($page_title)) ? $page_title : "Rapids Riders"; ?>
</title>
In the next view snippet I put some URLs in the links to serve as examples using the CI controller/function syntax. Adjust to your needs. To my thinking "home", "news" and "register" are separate controllers. I will focus on the Registration controller in a bit.
If you're not familiar with <?= it is shorthand for <?php echo.
body_start_view.php
<body>
<div class="wrapper">
<div class="banner">
</div>
<div class="nav_bar">
<ul>
<li><a href=<?= base_url("home"); ?>>Home</a></li>
<li><a href=<?= base_url("news"); ?>>News</a></li>
<li><a href=<?= base_url("register/faq"); ?>>Registration FAQs</a></li>
<li><a href=<?= base_url("register/help"); ?>>How to Register and Rules</a></li>
<li><a href=<?= base_url("register/school"); ?>>Register school</a></li>
<li><a href=<?= base_url("register/pupil"); ?>>Register pupil</a></li>
<li><a href=<?= base_url("home/about"); ?>>About Us</a></li>
<li><a href=<?= base_url("home/contact"); ?>>Contact Us</a></li>
</ul>
</div>
footer_view.php
<div class="clear"></div>
</div>
<div class="footer">
<div>
</div>
</div>
</body>
</html>
These three view snippets are easily reused by any controller on the website. A controller based "helper" function is shown below (in the registration controller) to demonstrate implementing a sort of "templating" scheme.
The example form html will be in a file called pupil_form_view.php and would be used (in my example) for the register/pupil page.
When using an MVC app structure you typically want to set as much "data" as possible in the controller and then pass it to the view. The various vars in this file will be defined and set in the controller calling this view.
pupil_form_view.php
<div id = "form_input">
<?php
echo form_open($form_action);
// Show Name Field in View Page
echo form_label($name_field['label'], $name_field['name']);
echo form_input($name_field);
// Show Email Field in View Page
echo form_label($email_field['label'], $email_field['name']);
echo form_input($email_field);
?>
</div>
// Close Form
<?php echo form_close(); ?>
Register.php is a controller that handles multiple pages - faq, help, school, pupil
class Register extends CI_Controller
{
function __construct()
{
parent::__construct();
}
//pupil will show the pupil registration form
public function pupil()
{
$view_file = "pupil_form_view"; //the file name of a view to load
$data['page_title'] = "Pupil Registration";
$data['form_action'] = 'form/data_submitted';
//form fields info
$data['name_field'] = array(
'label' => 'User Name: ',
'name' => 'u_name',
'placeholder' => 'Please Enter User Name',
'class' => 'input_box'
);
$data['email_field'] = array(
'type' => 'email',
'name' => 'u_email',
'placeholder' => 'Please Enter Email Address',
'class' => 'input_box'
);
//output a page
$this->render_page($view_file, $data);
}
//This function handles all the repetitive view loading code.
//Just pass it the name of a view file and some data to use in the views
//The default value for $view_data means you don't HAVE TO pass this argument if not needed
protected function render_page($content, $view_data = NULL)
{
//notice the use of 'method chaining' for load functions
$this->load
->view('header_view', $view_data)
->view('body_start_view')
->view($content) //$view_data vars will be visible to this view file
->view('footer_view');
}
public function faq()
{
$data['page_title'] = "Frequently Asked Questions";
$view_file = "faq_view";
//other data setting code if needed
$this->render_page($view_file, $data);
}
public function school()
{
$data['page_title'] = "School Registration";
$view_file = "school_form_view";
//other data setting code
$this->render_page($view_file, $data);
}
public function help()
{
$data['page_title'] = "How to Register";
$view_file = "help_view";
//other data setting code
$this->render_page($view_file, $data);
}
function index()
{
//just load the help page when users navigate to example.com/register
$this->help();
}
}
I know I went overboard here. Hope this is useful.
I solved it by nesting views that is calling $this->load->view($content); within my template view instead of <?php echo $content;?> then on the controller function i loaded the content like this
$data['content']='view_name_here'; // this loads content with a view
$this->load->view('my_template',$data); //loaded my template with $content
I have a page with HTML codes like this:
<ul class ='trainList'>
<li>
<div class="smallFont farelist no-discount ">
<div class="train-no">ABC 701</div>
<div class="train-time">06:10<br>07:15</div>
<div class="train-info">
<div class="box">
<div class="total-price">MYR 50.00</div>
<div class="farediscount">
<div class="actual-fare-price">Array</div>
<div class="train-discount"></div>
</div>
</div>
</li>
<li>
<div class="smallFont farelist no-discount ">
<div class="train-no">ABC 701</div>
<div class="train-time">06:10<br>07:15</div>
<div class="train-info">
<div class="box">
<div class="total-price">MYR 50.00</div>
<div class="farediscount">
<div class="actual-fare-price">Array</div>
<div class="train-discount"></div>
</div>
</div>
</li>
I want to scrape and extract train no, train time and train price from the above code.
My code does not scrape the info that I want but gives me blank space. I checked many questions posted before but I can't find something similar to this.
my code:
$train_doc = new DOMDocument();
libxml_use_internal_errors(TRUE);
if(!empty($html)){
$train_doc->loadHTML($html);
libxml_clear_errors();
$train_xpath = new DOMXPath($train_doc);
$train_list = array();
$train = $train_xpath->query('//div[#class="smallFont farelist no-discount"]');
var_dump($train);
if($train->length > 0){
foreach($train as $pat){
$name = $train_xpath->query('div[#class="train-no"]', $pat)->item(0)->nodeValue;
$train_types = array();
$types = $train_xpath->query('div[#class="train-time"]/a', $pat);
foreach($types as $type){
$train_types[] = $type->nodeValue;
$train_list[] = array('name' => $name, 'types' => $train_types);
}
}
}
echo "<pre>";
print_r($train_list);
echo "</pre>";
You need to that point to the element first, get each li first then point to those needed elements:
$train_list = array();
$train = $train_xpath->query('//li/div[contains(#class, "smallFont farelist no-discount")]');
if($train->length > 0) {
foreach($train as $t) {
$time_s = $train_xpath->evaluate('string(./div[#class="train-time"]/text()[1])', $t);
$time_e = $train_xpath->evaluate('string(./div[#class="train-time"]/text()[2])', $t);
$train_list[] = array(
'train_no' => $train_xpath->evaluate('string(./div[#class="train-no"])', $t),
'train_time' => "$time_s - $time_e",
'train_price' => $train_xpath->evaluate('string(./div[#class="train-info"]/div/div[#class="total-price"])', $t),
);
}
}
Sample Output
libxml_use_internal_errors(true);
$page = new DOMDocument();
$page->preserveWhiteSpace = false;
$page->loadHTML($html);
$xpath = new DomXPath($page);
foreach($xpath->query("//*[contains(#class, 'train-time')]") as $element){
print_r($element->nodeValue);
}
Hope this helps
first of all I'm a newbie in web development so...
I don't know if there is a way to do the following (neither if it's a best practice).
I have a CodeIgniter + Angularjs application where there is a view contains a Bootstrap tab (which is also a angular app):
[view_general_params.php]
<!DOCTYPE html>
<html lang="it">
<head>
</head>
<body ng-controller="HouseController">
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
</div>
</div>
</body>
</html>
Now, since each tab must contains a lot of controls (Textboxes etc..) I'm asking myself if there is a way to split it in different files loaded by the controller in this way:
public function details($house_id)
{
$user = $this->session->userdata('user');
if (is_null($user)) {
$this->session->sess_destroy();
redirect('login/index');
}
else {
$data = $this->create_data_array($user);
$data['house'] = $this->houses_model->get_house($house_id);
$data['title'] = "House details";
$this->load->view('head_navbar', $data);
$this->load->view('house_details_view', $data);
$this->load->view('view_general_params', $data);
$this->load->view('view_house_params', $data);
$this->load->view('view_panel_params', $data);
$this->load->view('view_statistics', $data);
}
}
where each others views contain data for a single tab-page:
[view_general_params.php]
<!DOCTYPE html>
<html lang="it">
<head>
</head>
<body>
<div class="container">
<div class="tab-content">
<div class="tab-pane active" id="general">
general controls...
</div>
</div>
</div>
</body>
</html>
Yes you can. In Codeigniter you can use a view as a template. Take these steps:
create a folder in your views directory, call it "Templates".
application\views\templates\
create each template the way you want and place it inside the templates folder:
application\views\templates\head_navbar.php
application\views\templates\house_details_view.php
application\views\templates\view_general_params.php
In your controller, you want to call these templates with a third paramater set to TRUE, then passing this to as an array value. This array will then be sent to your main view, like this:
public function details($house_id) {
$user = $this->session->userdata('user');
if (is_null($user)) {
$this->session->sess_destroy();
redirect('login/index');
} else {
$data = $this->create_data_array($user);
$data['house'] = $this->houses_model->get_house($house_id);
$data['title'] = "House details";
$data_to_final_view = array(
"view1" => $this->load->view('head_navbar', $data, TRUE),
"view2" => $this->load->view('house_details_view', $data, TRUE),
"view3" => $this->load->view('view_house_params', $data, TRUE),
"view4" => $this->load->view('view_panel_params', $data, TRUE),
"view5" => $this->load->view('view_statistics', $data, TRUE)
);
$this->load->view('view_general_params', $data_to_final_view);
}
}
Now, in your view_general_params view, you can place the template's content anywhere you want:
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content1">
<?= $view1 ?>
</div>
<div class="tab-content2">
<?= $view2 ?>
</div>
... etc..
</div>
I have a meny.php file who loads in with ajax the selected link to the div with id=content as you can see before the footer is included. This code is working and it´s nothing spacial with that. I just think this code may be helpfull.
<!DOCTYPE html>
<?php
include 'includes/head.php';
?>
<body>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'href' : '#fancybox-inner',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("a.single_image").fancybox({
'href' : '#fancybox-inner',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
$(function(){
// hide the div on page load and use a slidedown effect
$('div.content').fadeOut(0, function(){
$(this).slideDown(500);
});
// capture link clicks and slide up then go to the links href attribute
$('a.slide_page1').click(function(e){
e.preventDefault();
var $href = $(this).attr('href');
$('div.content').slideUp(500, function(){
// window.location = $href;
// alert($href);
});
});
});
</script>
<div class="page">
<?php
include 'includes/header.php';
?>
<div class="container-fluid" id = "bodu">
<div class="row-fluid">
<div class="span12">
<div class="bodu">
<div class="blog">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" id ="sidebarspan">
<h2>Meny</h2>
<ul id="nav">
<li id ="sidebar">
Hamburgare
</li>
<li id ="sidebar">
Måltider
</li>
<li id ="sidebar">
Dryck
</li>
<li id ="sidebar">
Tillbehör
</li>
<li id ="sidebar">
Desserter
</li>
<li id ="sidebar">
Övrigt
</li>
</ul>
</div>
<div class="span10">
<div id = "content" class="content">
<script src="jquery/general.js"></script>
</div>
</div>
</div>
</div>
</div>
<?php
include 'includes/footer.php';
?>
</div>
</div>
</div>
</div>
<div id="bg-bottom" >
<img src="images/bg-bottom.png" alt="bottom">
</div>
</div>
</div>
</body>
Now for the real problem. Lets say we selected the "hamburgere" from the meny.php. It will then try to load in like I said with ajax the hamburgare.php file. That file looks like this
<?php
include '../includes/head.php';
?>
<h1>Hamburgare!</h1>
<p>hamburgare är gott!</p>
<div class="row-fluid" id = "meals">
<div class="span12" id="right-pane">
<?php
$select = "SELECT * FROM hamburgare";
$sql = mysql_query($select) or die(mysql_error());
mysql_num_rows($sql);
while ($row = mysql_fetch_array($sql)) {
$name = "<name>".$row['name']."</name>";
$price = "<price>".$row['price']."</price>";
$description = "<description>".$row['description']." </description>";
$img = $row['image'];
$event = " <a name='$img' class='single_image' href='fancybox-inner' ><img src='Login/$img'/></a>";
echo $event;
/*closing the whileloop*/
}
?>
</div>
</div>
<div style="display:none">
<div id="fancybox-inner">
<?php
$query = mysql_query('SELECT name FROM hamburgare WHERE image = "' . $img . '"');
?>
<div class="container-fluid">
<div class="row-fluid">
<h2><?php echo $query ?></h2>
<h2><?php echo $name ?></h2>
<div class="span4">
<img src="Login/<?php echo $img; ?>" />
<!--Sidebar content-->
</div>
<div class="span8">
<?php echo $description ?>
<!--Body content-->
</div>
</div>
</div>
</div>
</div>
What I am trying to do here is to load all the images from the hamburgare table in the database and for now i am just printing them out in the while loop in a a-tag. Thats working fine but when a customer clicks on one of the images more specific information shall be shown to the customer.
What happens here is when you click on one of the images the fancybox-inner div is shown but the information the fancybox-inner contains is about the last loaded image. That means it doesn´t matter witch image is selected it will always show information about the last loaded image.
The reason is because the WHERE Clause in the last SQL query, I compare the the last loaded image ($img) who is equal to the one in the database. So what happens is I get this overlapping problem. Also I compare with $img and not the name = $img from the showsen a-tag, who I dont know how to write as a SQL query.
How ever I think the problem is bigger than that. The only thing I do is hiding the fancybox-inner div and just show it when some of the images is selected. That code is stil executed from the start. So I thing I needs Jquery/AJAX to load right information for each image. So I think I need to add onClick for each a-tag in the while-loop.
But since I am new in this stuff I dont know how to write that code. Maybe my hypothesis is wrong as well. I dont know.
What do you guys think? I will appreciate all kinds of help.
thanks in advance
You should add the returned values to an array first and do the output later.
For example:
$formattedResults = array();
while( $row = mysql_fetch_array( $sql ) )
{
$formattedResults[] = array(
'name' => sprintf( '<name>%s</name>', $row['name'] ),
'price' => sprintf( '<price>%s</price>', $row['price'] ),
'description' => sprintf( '<description>%s</description>', $row['description'] ),
'img' => $row['image'],
'event' => sprintf( '<a name="%s" class="single_image" href="fancybox-inner" ><img src="Login/%s"/></a>', $row['image'], $row['image'] ),
);
}
var_dump( $formattedResults );