Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialRandall Zepeda
1,979 Pointsforeach loops completely lost
i understood every video until this video and now I am completely lost with arrays,loops,php,html and css!! and i thought i understood html and css well. can someone explain this video step by step clearly on exactly each byte of code,what it does and why .like what the href is doing,the brackets,php in random locations,what the AS does. social icons being switched to icons?code stopping and starting for the same program with gaps of code . the spans being into it and how the css works with all of this.like what??!! im getting frustrated
8 Answers
Randall Zepeda
1,979 Pointsive watched the video about 1k times and im starting to understand it more. why is the curly bracket in its own php log more so i just dont the css span icon class identifiers like who does what and connects to who.
mikes02
Courses Plus Student 16,968 PointsOK, so the reason for this is because it is pretty common for HTML to be executed within a loop, so in this case as the foreach loop works it creates a new list item for each icon in the array. So rather than doing this all as one big block of PHP it's just breaking things up into smaller more manageable chunks. So at the top we are looping through the social icons array and assigning each value from that array to the $icon variable, so each time the loop runs through the array it's creating a list item based on the icon value. Then in the HTML we are using the $icon value to apply a unique class, that way we can style it with CSS. The reason the curly brackets are separated is because the foreach is opened above the list items, then PHP is closed so that HTML can be written, then you open PHP once again and close the foreach loop.
As an example, you can do it all within one PHP block like this
<?php
// I made up the values in this array so don't be worried if they don't match the course exactly
// This is just an example
$social_icons = array('facebook', 'twitter', 'instagram', 'pinterest');
echo '<ul>';
foreach($social_icons as $icon) {
echo '<li><a href=""><span class="icon '.$icon.'"></span></a></li>';
}
echo '</ul>';
?>
But you can see that it's not necessarily as easy to type out and/or read, which is why I think a lot of developers prefer to do it the way you are being shown in the course.
James Yerkes
9,556 PointsI know this question is old but I don't see any solid answers to some of the original questions, so I will try for future readers:
One thing to understand is that when the PHP tag opens, the server steps out of HTML world and into PHP world. Once in PHP world, all the PHP code will be run until reaching the closing PHP tag. As soon as it hits that closing tag, PHP world PAUSES, even if it is in the middle of a loop. Once out of PHP world, any HTML from that point on will just be displayed to the web browser as usual, until you hit another opening PHP tag. With that new opening tag, the server steps back into PHP world and RESUMES exactly where you left off. So in this case, if you previously exited PHP while in the middle of a loop, you now resume the PHP process smack in the middle of the loop. It reaches the end of the loop, but because PHP knows the loop is not over (there are more items in the array to loop over), the PHP process jumps BACK to the first set of PHP tags so it can iterate through the second, third, etc. items in the array. Now the process is back up at the first set of PHP tags, where the foreach() loop is initially declared. Then it will hit the closing PHP tag AGAIN, return back to HTML world, then hitting the second opening PHP tag AGAIN ... repeating this process until the looping conditions are finally over, then it will move on to the rest of your page.
As for the distinction between $social_icons and $icon ... In the foreach() statement, the first argument $social_icons is stating which variable to loop over. In this case, $social_icons is an array. You're basically saying "for each item in this array, do something". The loop will step into the first item in the array and pass that SPECIFIC ITEM down into the loop as a variable. This is a local variable that is only relevant within the loop. In this case we name that variable $icon. So WITHIN THE LOOP, any time you reference $icon, you're referencing whatever item within $social_icons the loop happens to be iterating over at that particular moment. Once that pass of the loop is over, it starts again, moves to the next item within the $social_icons array, and passes that new item into the loop, again as $icon. So each time it passes through the loop, it's setting $icon to something different, and printing out a new set of HTML.
When the small PHP tags are opened within the HTML to display the icon, remember that it is resuming PHP exactly where it left off, which happens to be within the foreach loop, meaning $icon is a valid variable at that moment and will reference the string that has been passed down from $social_icons.
I prefer to think of the PHP and HTML as two separate worlds layered on top of each other, but only one can be actively "turned on" at any given moment. So when you step into PHP, HTML world goes on pause, then when you exit PHP, PHP world goes on pause, even in the middle of a loop, and HTML world becomes active. PHP will wait until you re-enter PHP world to resume exactly where you left it. So it's like a dance, bouncing back and forth between the two layers, and you have to think about how each layer will control the flow of data.
Randall Zepeda
1,979 Pointsis there a way i can get my own coding team to help build these awesome programs i have in mind. The only part im scared about is people stealing my ideas. Im perfectly fine giving credit where credit is due for everyone but I do not want someone who is pro at coding to take my idea and make it their own and possibly tweaking it to make it better while im stuck still trying to get my idea into code.
mikes02
Courses Plus Student 16,968 PointsYou could certainly hire developers the importance would be having a contract and likely an NDA to protect yourself. However, you would want to speak to an attorney about legal matters as they relate to what you are looking to do.
Randall Zepeda
1,979 Pointsyeah thanks for answering. i actually just quit my job to go full time into learning web development. I didnt know what html was until about two weeks ago. Ever since then ive been spending about 10 hours a day. pretty much addicted anyways, this is the 2nd time going through html css php js as i did the beginners courses before with code academy and udacity. I actually understood all the videos up until that video and usually the challenges help me clarify but this challenge was way easier than what he was explain for that particular situation. I have a lot of ideas for apps and websites and businesses but I cant seem to put the coding to my vision especially with me being all noobish right now. i try to incorporate what i learn into my projects if i feel that it is a good fit for them. Im kind of stuck right now going from a beginner to intermediate . this is what was in the challenge that i understand
<?php
$names = array('Mike', 'Chris', 'Jane', 'Bob');
foreach($names as $name){echo " ". $name;}
?>
i just dont get the middle part of the other one with the <span>class"icon<php echo icon then end quotes. it messed up all my prior logic. combined with the css... because he shows one image all the icons together then with css he just moves the background position to show another part of the image. . you can see where it gets confusing for a noob when he adds little unfamiliar constructs.
Randall Zepeda
1,979 Pointsalso may i add i was doing cnc programming before this and thats how i got into this so good at finding out problems and tweaking programs to function correctly.
Hugo Paz
15,622 PointsHi Randall,
Can you please post the code that is confusing you?
Randall Zepeda
1,979 Pointsok i will but i also have this question with the code below. I understand everything in the code EXCEPT for how the variable $meth calls out the names of the array even though we never connected the array of names with $meth. it seems like $bb is asked if it is an array. so it would make more sense to call out hello($bb) and print all the names out than hello($meth)? cus meth wasnt even in the function so i dont understand where the attachment is if u get what im saying?
<?php function hello($bb){ if (is_array($bb)){foreach ($bb as $name){ echo "Hello, $name, hows it going?</br>";} } else{echo 'Hello friends';} } $meth=array('Jessie','Saul','Walt');
hello($meth); ?>
Randall Zepeda
1,979 Pointsunless the function hello() automatically when printing out connects hello with hello and u can put anything in the brackets and it will assume its hello function?
Randall Zepeda
1,979 Pointsheres the code i dont get from the other explanation. Do you understand every byte and its logic?
<ul class="social"> <?php foreach($social_icons as $icon){ ?>
<li><a href=""><span class="icon <?php echo $icon ?>"></span></a></li>
<?php
}
?>
</ul>
Randall Zepeda
1,979 Points<span class="icon '.$icon.'"></span>
can you explain this part you typed please. thats the confusing part. like the span does what? the dots before and after the variable icon? what the first icon does and the 2nd variable icon does?
mikes02
Courses Plus Student 16,968 PointsIn most instances a span is added purely as a styling hook, meaning that you can then target that element in your CSS and apply styles. In most cases that is why you will see a span being used. For example, in this case in the CSS you could do
.icon {
display: block;
width: 24px;
height: 24px;
}
The dots you see before and after the $icon are for concatenation which is probably more advanced than you need to be concerned with right now at the basic level, I was simply showing you how to accomplish it purely in PHP to obtain the same result.
Rahul Kumar
Courses Plus Student 2,822 Pointscan we directly use $social_icons rather than $icon,?>
mikes02
Courses Plus Student 16,968 Pointsmikes02
Courses Plus Student 16,968 PointsHi Randall,
PHP can certainly be difficult to wrap your head around at first. What is your experience level with HTML and CSS up to this point? Perhaps you jumped into PHP too quickly, have you gone through the HTML and CSS courses to the point where you feel comfortable with them? It might be helpful to take a step back and focus on more entry level subjects before tackling PHP. Don't mean that to sound discouraging at all, but I feel like based on the number of questions you are having it will be difficult for other forum members to walk you through every aspect of the video, you may need to work through the video several times until it clicks or as mentioned take a step back and tackle some more entry level subjects until you're more comfortable.