What I’m Learning- PHP Constants and Operators

Are you looking to use Constants and Operators in your PHP code? Here is a  collection of some things you will need.

Constants

A constant is something that will not be changed, starts with a letter or _ (no $), and can be used throughout script.

Start here:

define(name, value, case-insensitive)

Name: The name of the constant you are creating

Value: The value of the constant you are creating

Case Insensitive: Default is false (meaning if you want to be case insensitive, don’t fill in this portion)

Unlike strings, constants can be inside or outside functions.


Operators

Perform operations on variables and values (words and numbers) in the following groups:

  • Arithmetic operators
    • Simple math problems
    • <?php
      $x = 10;  
      $y = 6;
      echo $x + $y;
      ?> 
  • Assignment operators
    • using = like “x=y+z”, the x is now equal to the equation
    • <?php
      $x = 20;  
      $x += 100;
      echo $x;
      ?>  
  • Comparison operators
    • are used to compare two values
    •  Got this from W3Schools.com, great site for all languages.
  • Increment/Decrement operators
    • The PHP increment operators are used to increment a variable’s value.

      The PHP decrement operators are used to decrement a variable’s value.

  • Logical operators
  • String operators
  • Array operators

Cheers,

The Code Damsel

 

What I’m Learning – PHP Special String Commands

Below I have string commands that are used in the PHP language that will allow you to find out information or change what is already written!

The following string command will return how many characters are within the string:

<?php
echo strlen(“Hello world!”); // outputs 12
?>

The following string command will return how many words are within the string:

<?php
echo str_word_count(“Hello world!”); // outputs 2
?>

The following string command will return the string written backwards:

<?php
echo strrev(“Hello world!”); // outputs !dlrow olleH
?>

The following string command looks for a specific word, and will return the location within the string. Unless it is not there, then will return “false”:

<?php
echo strpos(“Hello world!”, “world”); // outputs 6
?>

The following string command will replace the first word with the second word, in the third section:

<?php
echo str_replace(“world”, “Monkey”, “Hello world!”); // outputs Hello Monkey!
?>
Hope this was helpful,
The Code Damsel

Google Maps in HTML

One awesome thing that you can add to your business web site is to show your location on Google Maps. The code that I’m going to show you is very easy to use, and you can find the coordinates for your location on Google.

/*HTML CODE STARTS HERE*/

<div id=”map” style=”width:300px; height:300px; float:left; margin:20; “></div>

<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(48.4799183, -122.6052809),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById(“map”), mapOptions);
}
</script>
<script src=”https://maps.googleapis.com/maps/api/js?callback=myMap”></script>
*/END HTML CODE*/

My first thought was that this looked like a java script code. And it is, you can see the js in the script src above. But it is already out there, and it searches the internet to load it. So don’t be scared off, it is totally handled on your end by HMTL.

To change the size of the box, just alter the height and width you see in the first line of the code.

The lat and long coordinates look like this: (48.4799183, -122.6052809), all you have to do is type your own coordinates in there.

Well there you go, that is how you add a Google map to your site!

Smiles!

The Code Damsel

Don’t give up coding 

Coding can be the most frustrating path to go down. I know I have started a project, had it close to completion, and had to start all over. There is good and bad news.

The good, you can Google everything. And don’t feel bad that you don’t remember how to code something, coding isn’t about memorization. It’s about solving a puzzle. Well, more like having a 1000 piece puzzle of all white pieces. But you slowly start coloring in the pieces and they make sense.

The bad news is it can take a while to find the right code. Every code out there will take some personalization to make it work for your needs. Sometimes, you won’t be able to find the answer right away. Instead of making you hate yourself by searching for hours, consider an alternative. I didn’t have the skills to make a slider work using java script, HTML, and CSS. And I spent hours trying to make it work. After s couple days, I finally decided I did not need it as much as I thought I did. I changed my direction, and inserted a gallery (see my other post about this) and you know what? It made me happy.

Coding is a special skill because it’s like carpentry or welding, you get to see your creation. Anything you make, is something to be proud of. It takes hard work, and dedication. Let’s say it loud for the people in the back “not just anyone can code”. Many people think making a website off a template is difficult, but they don’t know what goes into doing that. Never give up. You can do it!

Loves from

The Code Damsel

HTML and CSS Gradient

Hey Guys!

Today I am going to talk about backgrounds. These are a struggle for me, trying to figure out what looks good, what looks professional, and what I am actually capable of.

Here is one cool thing that I did figure out: how to do a gradient background.

Notice how along the sides it goes from white to light blue? One way of doing this is creating an image file that is really thin, and then having it repeat over and over and over again. But, I found a better way.


HTML CODE: put <div id= “grad”> in between the header and the body divs

CSS CODE: well, see the following. Each browser has a different way of reading the code written here, and if they don’t like any of them, the browser will resort to the individual color in the top line.

This was honestly a life saver. Not only does it look cool, but the code takes care of everything for you. If you want to change the colors, just switch them out. No need for the extra steps that an image would take.

OH! and do not forget that this will be the background for the whole website unless you say otherwise ( like how I told the body area to be white)

Have a lovely Monday,

The Code Damsel

HTML Gallery or Slideshow?

Lesson 1: Look for what’s not there, and don’t be afraid to move on.

There are many many many coding languages. While I am only working with CSS and HTML right now, I have tried to use Java, and I know there are many more out there. The thing about building a website, all of the code languages tie in together.

If you are looking to insert a slideshow, just know that you will most likely need a Java file for the interactions of the piece. I spent hours trying to edit a slide show, with code in each of my language files, and I was getting no where. I finally reached a point where I said this is not working any more, and I decided to delete the code that I had been working on for days. But that’s what we do: we build, we inspect, and we fix. It’s a cycle. I hope that for you, everything works out perfectly the first time around. But like I said above, do not be afraid to move on from something that isn’t working.

So after I deleted the code, I decided why not have a gallery of pictures instead!

<– This is what my gallery looked like, cool right?

Here’s the code:

/*HTML CODE*/

<div class=”gallery cf”>
<div><img src=”Images/Island Inn.jpg”><p class=”absolute-text”>Ann Marie’s</a> </p></div>
<div><img src=”Images/island.jpg”><p class=”absolute-text”>Island Life</a> </p></div>
<div><img src=”Images/Lake Erie Grocery Store.jpg”><p class=”absolute-text”>Around Town</a> </p></div>
<div><img src=”Images/night.jpg”><p class=”absolute-text”>Anacortes at Night</a> </p></div>
<div><img src=”Images/san juan island ferry.jpg”><p class=”absolute-text”>Ferry to the San Juan’s</a> </p>
</div>
<div><img src=”Images/Deception Pass Bridge.jpg”><p class=”absolute-text”>Deception Pass</a> </p></div>
<div><img src=”Images/park.jpg”><p class=”absolute-text”>Local Parks</a> </p></div>
<div><img src=”Images/rainbor.jpg”><p class=”absolute-text”>Rainbow</a> </p></div>
<div><img src=”Images/sunset.jpg”><p class=”absolute-text”>Sunset</a> </p></div>
<div><img src=”Images/boats.jpg”><p class=”absolute-text”>Cap Sante Marina</a> </p></div>
<div><img src=”Images/water.jpg”><p class=”absolute-text”>View From the Water</a> </p></div>
<div><img src=”Images/rocks.jpg”><p class=”absolute-text”>Rock Hunting</a> </p></div>
</div>

/*CSS CODE*/

/* Start Gallery*/
* {
box-sizing: border-box;
}

.gallery {
width: 600px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.gallery > div {
position: relative;
float: left;
padding: 5px;
}

.gallery > div > img {
display: block;
height:100px;
width: 150px;
transition: .1s transform;
transform: translateZ(0); /* hack */
}

.gallery > div:hover {
z-index: 1;
}

.gallery > div:hover > img {
transform: scale(3,3);
transition: .3s transform;
}

.cf:before, .cf:after {
display: table;
content: “”;
line-height: 0;
}

.cf:after {
clear: both;
}
/*text on images*/
.relative{position:relative; width:200px;}
.absolute-text{
position:absolute;
top:0;
font-size:12px;
font-family:”vedana”;
background:rgba(251,251,251,0.4);
padding:5px 5px;
width:100%;
text-align:center;
}
.absolute-text a{
font-size:12px;
color:#b92b27;
}

/*END CODE*/

Thankful to whoever created this, sorry I don’t remember where I picked it up from. I will try to be better about that from now on.

To get rid of the text over the images, delete “<p class=”absolute-text”>Ann Marie’s</a> </p>: this part of the code, and the CSS code below /*text on images*/

I used images with a width of 150px and a height of 100px.

Hope you like it, email me with any questions!

The Code Damsel