Category: Coding
Best Codeigniter 4 Sitemap Generator
The code samples below will give you the best Codeigniter Generating Software.
application/config/routes.php
| Examples: my-controller/index -> my_controller/index | my-controller/my-method -> my_controller/my_method */ $route['default_controller'] = 'welcome'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE; $route['sitemap.xml'] = "Sitemap/index";
application/controllers/Sitemap.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Sitemap extends CI_Controller {
public function index() {
$this->load->database();
$query = $this->db->get("locations");
$data['pages'] = $query->result();
$this->load->view('sitemap', $data); }
}
}
application/views/sitemap.php
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/TR/REC-html40" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9">
<head>
<title>XML Sitemap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #545353;
}
table {
border: none;
border-collapse: collapse;
}
#sitemap tr:nth-child(odd) td {
background-color: #eee !important;
}
#sitemap tbody tr:hover td {
background-color: #ccc;
}
#sitemap tbody tr:hover td, #sitemap tbody tr:hover td a {
color: #000;
}
#content {
margin: 0 auto;
width: 1000px;
}
.expl {
margin: 18px 3px;
line-height: 1.2em;
}
.expl a {
color: #da3114;
font-weight: 600;
}
.expl a:visited {
color: #da3114;
}
a {
color: #000;
text-decoration: none;
}
a:visited {
color: #777;
}
a:hover {
text-decoration: underline;
}
td {
font-size:11px;
}
th {
text-align:left;
padding-right:30px;
font-size:11px;
}
thead th {
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="content">
<h1>XML Sitemap</h1>
<p class="expl">
Generated by <a href="https:jimnio.com" target="_blank" rel="noopener noreferrer">Jimnio SEO</a>, this is an XML Sitemap, meant for consumption by search engines.<br><br>
You can find more information about XML sitemaps on <a href="http://sitemaps.org" target="_blank" rel="noopener noreferrer">sitemaps.org</a>.
</p>
<p class="expl">
This XML Sitemap Index file contains 19 sitemaps.
</p>
<table id="sitemap" cellpadding="3">
<thead>
<tr>
<th width="75%">Sitemap</th>
<th width="25%">Last Modified</th>
</tr>
</thead>
<tbody>
<?php foreach($items as $item) { ?>
<tr>
<td>
<a href="<?php echo base_url()."page/".$item->locationname ?>"><?php echo base_url()."page/".$item->locationname ?></a>
</td>
<td>2020-02-10 02:37 +00:00</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>NPM Fitness Macros Calculator
[wgl_button button_text=”NPM” css_animation=”bounceInLeft” size=”s” align=”right” link=”url:https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ffitness-macros-calculator|||”]
[wgl_button button_text=”Github” css_animation=”bounceInRight” size=”s” link=”url:https%3A%2F%2Fgithub.com%2Fderfmilo%2Ffitness-macros-calculator|||”]
Is Your Company Growing?
Here at Jimnio, there is one thing we think of first. Can Software or Site we are developing handle going Viral or an Uptick?
With this in mind we offer tactics know as load balancing for online resources with Secondary DNS and multiple others if needed.
This requires Database Replication between servers unless you pull from one DB on both sites but it still needs to be replicated in case a rack in a data-center goes completely down.
If you have concerns that sells might be lost due to frequent outages with you hosting company contact us and we can setup you current system with the tools and plan you need to stay up and running.
Learn More
2016/2017 ONLINE/INTERACTIVE SILVER ADDY AWARD
Jimnio won Silver for Online/Interactive Website/Consumer
Learn More
HaloLens Wave Information
On February 29th, Microsoft announced the details of the HoloLens Development Edition. With the announcement, we got our first look at specs, documentation, and a shipping date of March 30th. And even more information has come in since then about a number of apps and games which will be available from the start.
But some have been left wondering about the specific mechanics of invitations and shipping. An admin on the Windows Holographic Developer Forum has clarified how it will work, informing developers they will be invited to purchase in waves. According to the information in the admin’s post here are some quick steps developers should be aware of:
Apply for the HoloLens Development Edition.
Check for an email indicating the status of your application.
Upon approval, the email will indicate your wave number.
Each wave will be served during a 2-3 month window.
When your wave is up you will receive an email inviting you to order your HoloLens Development Edition
The admin also suggests you order your HoloLens within one week of receiving your invitation to order. After that week is up you can still place your order but it will be subject to availability.
Finally, those that are hoping to be in the first wave, but are anxious about not getting their invitation email yet, don’t worry. The admin says most developers who will be part of the first wave have not yet received their invitations. And if you are worried you missed an update about your order status, you can always check the registration website here.
It won’t be long before the HoloLens Development Edition is in the hands of a wider set of developers who will start experimenting with the holographic side of the Windows 10 ecosystem.
Learn More
CSS3 Animations
This is an experimental technology
Because this technology’s specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
There are three key advantages to CSS animations over traditional script-driven animation techniques:
- They’re easy to use for simple animations; you can create them without even having to know JavaScript.
- The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
- Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible.
Configuring the animation
To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in Defining the animation sequence using keyframes below.
The sub-properties of the animation property are:
animation-delay- Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-direction- Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
animation-duration- Configures the length of time that an animation should take to complete one cycle.
animation-iteration-count- Configures the number of times the animation should repeat; you can specify
infiniteto repeat the animation indefinitely. animation-name- Specifies the name of the
@keyframesat-rule describing the animation’s keyframes. animation-play-state- Lets you pause and resume the animation sequence.
animation-timing-function- Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
animation-fill-mode- Configures what values are applied by the animation before and after it is executing.
Defining the animation sequence using keyframes
Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a percentage to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to. Both are optional. If from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.
You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.
Examples
Note: The examples here don’t use any prefix on the animation CSS properties. WebKit-based browsers and older versions of the other browsers may need prefixes; the live examples you can click to see in your browser also include the
-webkit prefixed versions.Making text slide across the browser window
This simple example styles the <h1> element so that the text slides in from off the right edge of the browser window.
Note that animations like this can cause the page to become wider than the browser window. To avoid this problem put the element to be animated in a container, and set overflow:hidden on the container.
h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
In this example the style for the <h1> element specifies that the animation should take 3 seconds to execute from start to finish, using the animation-duration property, and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is named “slidein”.
If we wanted any custom styling on the <h1> element to appear in browsers that don’t support CSS animations, we would include it here as well; however, in this case we don’t want any custom styling other than the animation effect.
The keyframes are defined using the @keyframes at-rule. In this case, we have just two keyframes. The first occurs at 0% (using the alias from). Here, we configure the left margin of the element to be at 100% (that is, at the far right edge of the containing element), and the width of the element to be 300% (or three times the width of the containing element). This causes the first frame of the animation to have the header drawn off the right edge of the browser window.
The second (and final) keyframe occurs at 100% (using the alias to). The left margin is set to 0% and the width of the element is set to 100%. This causes the header to finish its animation flush against the left edge of the content area.
Adding another keyframe
Let’s add another keyframe to the previous example’s animation. Let’s say we want the header’s font size to increase as it moves from right to left for a while, then to decrease back to its original size. That’s as simple as adding this keyframe:
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
This tells the browser that 75% of the way through the animation sequence, the header should have its left margin at 25% and the width should be 150%.
Making it repeat
To make the animation repeat itself, simply use the animation-iteration-count property to indicate how many times to repeat the animation. In this case, let’s use infinite to have the animation repeat indefinitely:
h1 {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
Making it move back and forth
That made it repeat, but it’s very odd having it jump back to the start each time it begins animating. What we really want is for it to move back and forth across the screen. That’s easily accomplished by setting animation-direction to alternate:
h1 {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Using animation events
You can get additional control over animations — as well as useful information about them — by making use of animation events. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event.
We’ll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work.
Adding the CSS
We start with creating the CSS for the animation. This animation will last for 3 seconds, be called “slidein”, repeat 3 times, and alternate direction each time. In the @keyframes, the width and margin-left are manipulated to make the element slide across the screen.
.slidein {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
animation-name: slidein;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
Adding the animation event listeners
We’ll use JavaScript code to listen for all three possible animation events. This code configures our event listeners; we call it when the document is first loaded in order to set things up.
var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
e.className = "slidein";
This is pretty standard code; you can get details on how it works in the documentation for element.addEventListener(). The last thing this code does is set the class on the element we’ll be animating to “slidein”; we do this to start the animation.
Why? Because the animationstart event fires as soon as the animation starts, and in our case, that happens before our code runs. So we’ll start the animation ourselves by setting the class of the element to the style that gets animated after the fact.
Receiving the events
The events get delivered to the listener() function, which is shown below.
function listener(e) {
var l = document.createElement("li");
switch(e.type) {
case "animationstart":
l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
l.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
}
This code, too, is very simple. It simply looks at the event.type to determine which kind of animation event occurred, then adds an appropriate note the <ul> (unordered list) we’re using to log these events.
The output, when all is said and done, looks something like this:
- Started: elapsed time is 0
- New loop started at time 3.01200008392334
- New loop started at time 6.00600004196167
- Ended: elapsed time is 9.234000205993652
Note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured. Note also that after the final iteration of the animation, the animationiteration event isn’t sent; instead, the animationend event is sent.
The HTML
Just for the sake of completeness, here’s the HTML that displays the page content, including the list into which the script inserts information about the received events:
<body>
<h1 id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>H1</code> elements
move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
<ul id="output">
</ul>
</body>
Bootstrap 3 The Love Affair
Bootstrap 3.1: Base CSS
Bootstrap has many reasons to love it. Why? Apart from being a FREE open-sourced, really powerful, mobile-first responsive front-end framework, it also provides you with quite a lot of value right out of the box with very little effort. With just a simple knowledge of some of the basic elements of Bootstrap styles, it takes just a small amount of work typically just adding an CSS class here or there to HTML elements you already have in place to to truly transform your site into a professional-looking cleanly designed web application. In this course, we look at what basic CSS classes come with Bootstrap and how to apply them to your site to make it look great. You ll be surprised at how easy it is, and maybe you re love affair with this front-end framework will begin too
Bootstrap 3.1: Components
HTML is pretty simple. There are a limited number of elements, and onlym so much you can do to style those individual elements. Bootstrap s core CSS does a good job with that default styling, but now it s time to take the next step. In this course, we ll look at Bootstrap Components these are design elements that are not a part of HTML proper, but a combination of HTML and CSS that create compelling visual design elements to help create engaging user interfaces. We ll look at creating some different input elements, page navigation, emphasizing content in subtle ways with labels and badges, or in big ways with jumbotrons. We ll also check out how we can visually separate content from its surroundings both text-based content in wells, panels and alerts, and images in thumbnails. It all comes together beautifully with Bootstrap to make our job of creating great-looking websites easy!
Bootstrap 3.1: javascript
It s time for javascript to take the center stage! Bootstrap comes loaded with a ton of great javascript plugins to help us create powerful and engaging sites for our customers and users. We ll capture the user s attention with modal dialogs and create an auto-updating navigation element that remains fixed in the browser window as you scroll through your site. We ll also add some interactive elements to your site as we show and hide content dynamically using the tab and collapse plugins, as well as provide some additional contextual content to our users in the form of tooltips ad popovers. This is when we take our site to the next level not only will it look good, but it will start behaving well too. Interactive and engaging that s what will hold your viewers attention Let s see how Bootstrap will help us deliver:
Learn More
Zip Code DB KML Layer Tool From Programming Times
Fusion Table Layers
JS:
var initial = document.getElementById('address').value;//initial value is zip codes separated by commas and no space between:: example:40475,40489,44456
$.ajax({
type:"GET",
url: "query.php?zipcode="+encodeURI(initial),
dataType: 'json',
success: function(data) {
map.data.forEach(function (feature) {
map.data.remove(feature);
});
map.data.loadGeoJson('google.json');
map.data.addGeoJson(data);
map.data.setStyle({
icon: '//example.com/path/to/image.png',
fillColor: "#FF0000",
strokeColor: "#FF0000",
fillOpacity: 0.2,
strokeOpacity: 0.6,
strokeWeight: 3
});
}
});
INIT of Google Map:
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(34.0500,-118.2500),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer[0] = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: yourtableid
},
templateId: 2,
styleId: 2
});
layer[0].setMap(map);
google.maps.event.addListener(map, "bounds_changed", function() {
displayZips();
});
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() < 11) {
for (var i=0; i<labels.length; i++) {
labels[i].setMap(null);
}
}
});
}
query.php
query($query)){
while ($row = $result->fetch_assoc()) {
$array['features'][$count]['type'] = 'Feature';
$array['features'][$count]['properties']['zipCode'] = $row["zipcode"];
$array['features'][$count]['properties']['state'] = $row["state"];
$MultiPolygon = explode('MultiPolygon', $row['geometry']);
$xml = simplexml_load_string($row['geometry']);
if(!$xml->Polygon[1]){
$array['features'][$count]['geometry']['type'] = 'Polygon';
$geometry = trim(preg_replace('/\s+/', ' ', $row['geometry']));
$geometry = strip_tags($geometry);
$geometry = explode(',0.0', $geometry);
$geometry = array_diff( $geometry, array( ' ' ) );
for ($i=0; $i < count($geometry); $i++) { // $array['features'][$count]['geometry']['coordinates'][0][$i][] = $geometry[$i]; $coor = explode(",", $geometry[$i]); $array['features'][$count]['geometry']['coordinates'][0][$i][] = floatval($coor[0]); $array['features'][$count]['geometry']['coordinates'][0][$i][] = floatval($coor[1]); } $count++; }else{ $array['features'][$count]['geometry']['type'] = 'MultiPolygon'; $multicount = 0; foreach ($xml->Polygon as $multi) {
$geometry = (string)$multi->outerBoundaryIs->LinearRing->coordinates[0];
$geometry = trim(preg_replace('/\s+/', ' ', $geometry));
$geometry = explode(',0.0', $geometry);
$geometry = array_diff( $geometry, array( '' ) );
for ($i=0; $i < count($geometry); $i++) { $coor = explode(",", $geometry[$i]); $array['features'][$count]['geometry']['coordinates'][$multicount][0][$i][] = floatval($coor[0]); $array['features'][$count]['geometry']['coordinates'][$multicount][0][$i][] = floatval($coor[1]); // $array['features'][$count]['geometry']['coordinates'][$multicount][0][$i][] = $geometry[$i]; } $multicount++; } $count++; } } echo json_encode($array); $result->free();
}
$conn->close();?>
?>
More Information
A active Database to use of all zip codes, counties,states,population and their coordinates to map please check out Zipnio.com
Learn More
KML Convertor To MySQL Script
CREATE a Db in Mysql with this statement
CREATE TABLE tablename (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
boundary VARCHAR(9000) NOT NULL,
zipcode VARCHAR(6) NOT NULL)
Then Connect this script to your DataBase!
<html>
<body>
<?php
$db_host = ''; // hostname
$db_name = ''; // databasename
$db_user = ''; // username
$user_pw = ''; // password
//THIS CAN CONVERT CENSUS DATA
$con = new PDO('mysql:host='.$db_host.'; dbname='.$db_name, $db_user, $user_pw);
$con->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$completeurl = "map.xml";
$xml = simplexml_load_file($completeurl);
$placemarks = $xml->Document->Folder->Placemark;
for ($i = 0; $i < count($placemarks); $i++) { $coordinates = $placemarks[$i]->ExtendedData->SchemaData->SimpleData[2][0];
$cor_d = $placemarks[$i]->Polygon->outerBoundaryIs->LinearRing->coordinates;
$cor_d = json_encode($cor_d);
$sql = "INSERT INTO tablename (zipcode, boundary) VALUES (?,?)";
$q = $con->prepare($sql);
$q->execute(array($coordinates ,$cor_d));
echo $i;
}
?>
</body>
</html>