title
1. E - Commerce Website PHP Tutorial - Setting Up the Pages, Layout, and Templates

description
In this first video we will establish pages our system will need. We also create a modular design and page layout for easier site management. The E - Commerce Web Site we will be assembling is one in which all of the inventory is in a MySQL database and we offer a custom PHP cart for a unique shopping experience. It is a site that handles sales, customers, and inventory.

detail
{'title': '1. E - Commerce Website PHP Tutorial - Setting Up the Pages, Layout, and Templates', 'heatmap': [{'end': 996.337, 'start': 933.324, 'weight': 0.932}], 'summary': 'This tutorial series focuses on building an e-commerce website using php and mysql, covering topics such as setting up pages, layout, and templates, creating online store structure, integrating paypal ipn for payment gateway, and implementing css styling for uniform design.', 'chapters': [{'end': 185.273, 'segs': [{'end': 82.689, 'src': 'embed', 'start': 15.981, 'weight': 0, 'content': [{'end': 20.965, 'text': "All right, before we get started in part one, here we have to let you know that we're going to be using PHP,", 'start': 15.981, 'duration': 4.984}, {'end': 25.569, 'text': "which is a dynamic scripting language that we're going to use to build our shopping cart.", 'start': 20.965, 'duration': 4.604}, {'end': 29.613, 'text': "And we're also going to use to interact with our MySQL database.", 'start': 26.29, 'duration': 3.323}, {'end': 35.638, 'text': "So we're using PHP for our dynamic scripting language, which is a necessary thing for a system like this.", 'start': 29.693, 'duration': 5.945}, {'end': 40.602, 'text': "And we're using MySQL database, which is also a necessary thing for a system like this.", 'start': 36.218, 'duration': 4.384}, {'end': 42.624, 'text': 'Both are free and open source.', 'start': 40.962, 'duration': 1.662}, {'end': 46.566, 'text': 'And they work on pretty much any website host server online.', 'start': 43.164, 'duration': 3.402}, {'end': 49.248, 'text': 'And PHP and MySQL are pretty simple.', 'start': 47.067, 'duration': 2.181}, {'end': 58.154, 'text': "And the way we'll explain it to you, it will be pretty painless even if you don't know it or haven't worked with those technologies before.", 'start': 49.849, 'duration': 8.305}, {'end': 67.358, 'text': "alright. so it also help, if you have HTML and CSS skills, just a little bit to be able to understand what we're doing.", 'start': 59.272, 'duration': 8.086}, {'end': 80.968, 'text': "when we're laying out things on a web page and I'm going to be working in Dreamweaver CS4, you might be in Dreamweaver CS5 same thing, pretty much,", 'start': 67.358, 'duration': 13.61}, {'end': 82.689, 'text': "so there won't be very much difference.", 'start': 80.968, 'duration': 1.721}], 'summary': 'Using php and mysql to build a shopping cart system, suitable for any website host server. requires basic html and css skills.', 'duration': 66.708, 'max_score': 15.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ15981.jpg'}, {'end': 161.586, 'src': 'embed', 'start': 105.926, 'weight': 4, 'content': [{'end': 108.788, 'text': "Don't worry because I'm going to release all this source code free.", 'start': 105.926, 'duration': 2.862}, {'end': 114.31, 'text': "So I'm working in Dreamweaver CS4 to assemble all the source code for this system.", 'start': 109.568, 'duration': 4.742}, {'end': 117.312, 'text': "All right, let's start banging out some pages now.", 'start': 115.511, 'duration': 1.801}, {'end': 119.555, 'text': 'create a new.', 'start': 118.115, 'duration': 1.44}, {'end': 121.456, 'text': 'actually, before we start making any pages,', 'start': 119.555, 'duration': 1.901}, {'end': 129.758, 'text': "let's just go to our desktop or any location in your computer where you want to set up your store and let's put a new folder.", 'start': 121.456, 'duration': 8.302}, {'end': 138.461, 'text': "I'm gonna call it my online store, so that'll be the main root folder for my website.", 'start': 129.758, 'duration': 8.703}, {'end': 144.383, 'text': "go to Dreamweaver and let's create a new PHP file.", 'start': 138.461, 'duration': 5.922}, {'end': 150.153, 'text': "now let's go to file save as find that folder you just made where it's empty inside.", 'start': 144.383, 'duration': 5.77}, {'end': 156.6, 'text': "We're going to put in index as a title for this PHP document.", 'start': 151.695, 'duration': 4.905}, {'end': 161.586, 'text': "If you're creating in Dreamweaver, it'll automatically have the PHP extension when you save it.", 'start': 157.341, 'duration': 4.245}], 'summary': 'A plan to release source code and set up an online store using dreamweaver cs4 and php.', 'duration': 55.66, 'max_score': 105.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ105926.jpg'}], 'start': 0.356, 'title': 'E-commerce website building', 'summary': 'Introduces the e-commerce website building lesson series, emphasizing the use of php and mysql for building the shopping cart, which are both free and open source. it also discusses the importance of html and css skills, setting up the root folder, creating a new php file, and laying out the basic pages and scripts needed to run the online store system using dreamweaver cs4.', 'chapters': [{'end': 58.154, 'start': 0.356, 'title': 'E-commerce website building lesson', 'summary': 'Introduces the e-commerce website building lesson series, highlighting the use of php as the dynamic scripting language and mysql database for building the shopping cart, both being free and open source.', 'duration': 57.798, 'highlights': ['The chapter introduces the e-commerce website building lesson series, emphasizing the use of PHP as the dynamic scripting language and MySQL database for building the shopping cart, both being free and open source.', "The use of PHP and MySQL is highlighted as necessary for the system, and it's explained that they work on pretty much any website host server online.", 'The simplicity of PHP and MySQL is mentioned, assuring the audience that the explanation will be painless, even for those unfamiliar with the technologies.']}, {'end': 185.273, 'start': 59.272, 'title': 'Creating online store with dreamweaver', 'summary': 'Discusses the importance of html and css skills, setting up the root folder for the website, creating a new php file, and laying out the basic pages and scripts needed to run the online store system using dreamweaver cs4.', 'duration': 126.001, 'highlights': ['The importance of having HTML and CSS skills is emphasized for understanding web page layout.', 'Setting up the root folder for the website is crucial, and the process is detailed, including creating a new PHP file and saving it with the index.php title.', 'Laying out all the basic pages and scripts needed to run the online store system in Dreamweaver CS4 is prioritized before adding additional elements to the pages.']}], 'duration': 184.917, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ356.jpg', 'highlights': ['The chapter introduces the e-commerce website building lesson series, emphasizing the use of PHP as the dynamic scripting language and MySQL database for building the shopping cart, both being free and open source.', "The use of PHP and MySQL is highlighted as necessary for the system, and it's explained that they work on pretty much any website host server online.", 'The simplicity of PHP and MySQL is mentioned, assuring the audience that the explanation will be painless, even for those unfamiliar with the technologies.', 'The importance of having HTML and CSS skills is emphasized for understanding web page layout.', 'Setting up the root folder for the website is crucial, and the process is detailed, including creating a new PHP file and saving it with the index.php title.', 'Laying out all the basic pages and scripts needed to run the online store system in Dreamweaver CS4 is prioritized before adding additional elements to the pages.']}, {'end': 370.011, 'segs': [{'end': 261.86, 'src': 'embed', 'start': 185.593, 'weight': 0, 'content': [{'end': 193.116, 'text': "Now let's file, save as category.php, save.", 'start': 185.593, 'duration': 7.523}, {'end': 198.539, 'text': "Now let's save category.php as product list.", 'start': 193.797, 'duration': 4.742}, {'end': 200.38, 'text': 'So category is the page.', 'start': 199.199, 'duration': 1.181}, {'end': 204.162, 'text': 'product underscore list dot php.', 'start': 201.26, 'duration': 2.902}, {'end': 212.988, 'text': "Let's say you have shirts, jeans, socks, and shoes all under the category of clothing.", 'start': 206.003, 'duration': 6.985}, {'end': 215.729, 'text': 'That means when the person clicks clothing,', 'start': 213.788, 'duration': 1.941}, {'end': 223.795, 'text': "they're going to go to the category dot php page and they'll see shirts da da da da bear shoes and whatever that you have.", 'start': 215.729, 'duration': 8.066}, {'end': 231.788, 'text': "Anything that's in that category, you can put an icon for or whatever that they can click on and see those items.", 'start': 224.635, 'duration': 7.153}, {'end': 235.81, 'text': 'Product list page is where the actual,', 'start': 232.708, 'duration': 3.102}, {'end': 244.095, 'text': 'all the actual pants or all the shirts or all the socks and all the various different shoes will be on a product list page.', 'start': 235.81, 'duration': 8.285}, {'end': 248.898, 'text': 'Then file, save as product.', 'start': 245.136, 'duration': 3.762}, {'end': 256.063, 'text': 'Now this page is going to be the one that displays individual products.', 'start': 249.439, 'duration': 6.624}, {'end': 261.86, 'text': "and we'll have the Buy Now button on it, or Add to Cart button, and it'll have all the details of the product.", 'start': 256.616, 'duration': 5.244}], 'summary': 'Creating category.php for clothing items, product list for individual items, and product.php for displaying and purchasing items.', 'duration': 76.267, 'max_score': 185.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ185593.jpg'}, {'end': 370.011, 'src': 'embed', 'start': 336.17, 'weight': 3, 'content': [{'end': 347.024, 'text': "let's take cart.php file, save as, go into the store scripts folder that we just created and let's Rename this Render Cart.", 'start': 336.17, 'duration': 10.854}, {'end': 353.066, 'text': 'And this will be a file that we need in order to render the shopping cart to the customer.', 'start': 348.164, 'duration': 4.902}, {'end': 356.867, 'text': 'Save Update links.', 'start': 354.426, 'duration': 2.441}, {'end': 361.328, 'text': "No So let's take Render Cart now.", 'start': 357.347, 'duration': 3.981}, {'end': 362.489, 'text': 'File Save as.', 'start': 361.508, 'duration': 0.981}, {'end': 366.17, 'text': 'Connect to MySQL.', 'start': 364.349, 'duration': 1.821}, {'end': 370.011, 'text': 'And this will be the central file that we use.', 'start': 367.97, 'duration': 2.041}], 'summary': 'Renamed cart.php as render cart for rendering shopping cart. central file for connecting to mysql.', 'duration': 33.841, 'max_score': 336.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ336170.jpg'}], 'start': 185.593, 'title': 'Creating online store structure', 'summary': 'Explains creating category and product list pages like category.php and product_list.php to display items, and setting up the structure of an online store system including product display and shopping cart functionality.', 'chapters': [{'end': 235.81, 'start': 185.593, 'title': 'Creating category and product list pages', 'summary': 'Explains the process of creating category and product list pages, such as category.php and product_list.php, to display items under different categories, like shirts, jeans, socks, and shoes, allowing users to click and view the items.', 'duration': 50.217, 'highlights': ['The process of creating category and product list pages It explains the steps involved in creating category.php and product_list.php pages to display items under different categories.', 'Displaying items under different categories The pages allow for the display of items like shirts, jeans, socks, and shoes under various categories, enhancing user navigation.', 'Allowing users to click and view the items The pages enable users to click on categories and view the items, improving user experience and interaction.']}, {'end': 370.011, 'start': 235.81, 'title': 'Setting up online store structure', 'summary': 'Focuses on setting up the structure of an online store system including creating product list, individual product display, and shopping cart functionality within the website, with the creation of essential files and folders.', 'duration': 134.201, 'highlights': ['Creating product list, individual product display, and shopping cart functionality The chapter covers the setup of product list, individual product display, and shopping cart functionality within the website.', 'Creating necessary files and folders for the online store system The process involves creating essential files such as product.php, cart.php, Render Cart, and Connect to MySQL, as well as setting up folders including store scripts.']}], 'duration': 184.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ185593.jpg', 'highlights': ['The process of creating category and product list pages It explains the steps involved in creating category.php and product_list.php pages to display items under different categories.', 'Creating product list, individual product display, and shopping cart functionality The chapter covers the setup of product list, individual product display, and shopping cart functionality within the website.', 'Displaying items under different categories The pages allow for the display of items like shirts, jeans, socks, and shoes under various categories, enhancing user navigation.', 'Creating necessary files and folders for the online store system The process involves creating essential files such as product.php, cart.php, Render Cart, and Connect to MySQL, as well as setting up folders including store scripts.', 'Allowing users to click and view the items The pages enable users to click on categories and view the items, improving user experience and interaction.']}, {'end': 466.074, 'segs': [{'end': 466.074, 'src': 'embed', 'start': 402.538, 'weight': 0, 'content': [{'end': 411.44, 'text': "And we're using PayPal as our payment gateway because it's the most widely used in the world, the most trusted, and I think it's the most secure.", 'start': 402.538, 'duration': 8.902}, {'end': 416.941, 'text': "Even though they have had some problems in the past, that's what happens when you're the big dog online.", 'start': 412, 'duration': 4.941}, {'end': 421.462, 'text': 'You get a lot of focus put on you and a lot of pressure put on you.', 'start': 417.781, 'duration': 3.681}, {'end': 424.923, 'text': 'PayPal is definitely the king of online transactions.', 'start': 421.882, 'duration': 3.041}, {'end': 425.663, 'text': "That's for sure.", 'start': 425.083, 'duration': 0.58}, {'end': 426.703, 'text': 'Nobody can argue that.', 'start': 425.843, 'duration': 0.86}, {'end': 432.477, 'text': 'So PayPal IPN script is going to be the one that, when people check out,', 'start': 427.335, 'duration': 5.142}, {'end': 437.98, 'text': "we're going to be able to talk to PayPal behind the scenes and we'll be able to see what they bought when they bought it,", 'start': 432.477, 'duration': 5.503}, {'end': 441.882, 'text': 'what their name is and their email address, and certain things like that.', 'start': 437.98, 'duration': 3.902}, {'end': 449.745, 'text': 'And on the site you have to let people know that you are going to be collecting that sort of data from them in your terms of use.', 'start': 442.282, 'duration': 7.463}, {'end': 455.068, 'text': 'And you might also have to get yourself an SSL certificate.', 'start': 450.326, 'duration': 4.742}, {'end': 460.871, 'text': "And we're going to discuss more about that when we talk about choosing our online payment gateway.", 'start': 455.987, 'duration': 4.884}, {'end': 463.232, 'text': "Because there's other choices out there besides PayPal.", 'start': 460.971, 'duration': 2.261}, {'end': 466.074, 'text': "There's a lot more choices besides PayPal.", 'start': 463.953, 'duration': 2.121}], 'summary': 'Paypal is the widely used, trusted, and secure online payment gateway for transactions, despite past problems, with alternatives available.', 'duration': 63.536, 'max_score': 402.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ402538.jpg'}], 'start': 371.209, 'title': 'Setting up paypal ipn', 'summary': 'Discusses the importance and advantages of using paypal as a payment gateway for an online store, the need for ssl certificate and terms of use, and mentions other online payment gateway options.', 'chapters': [{'end': 466.074, 'start': 371.209, 'title': 'Setting up paypal ipn for online store', 'summary': 'Discusses setting up paypal ipn for an online store, highlighting the importance and advantages of using paypal as a payment gateway, emphasizing the need for ssl certificate and terms of use, and mentioning the availability of other online payment gateway options.', 'duration': 94.865, 'highlights': ['PayPal is the most widely used and trusted payment gateway in the world, known for its security and dominance in online transactions.', "The PayPal IPN script enables tracking of customer purchases, including details such as items purchased, customer's name, and email address, providing valuable data for the online store.", 'Emphasizes the need for informing customers about data collection in the terms of use and the potential requirement of obtaining an SSL certificate for secure transactions.', 'Highlights the availability of other online payment gateway options besides PayPal, indicating the importance of considering alternative choices for the online store.']}], 'duration': 94.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ371209.jpg', 'highlights': ['PayPal is the most widely used and trusted payment gateway in the world, known for its security and dominance in online transactions.', "The PayPal IPN script enables tracking of customer purchases, including details such as items purchased, customer's name, and email address, providing valuable data for the online store.", 'Emphasizes the need for informing customers about data collection in the terms of use and the potential requirement of obtaining an SSL certificate for secure transactions.', 'Highlights the availability of other online payment gateway options besides PayPal, indicating the importance of considering alternative choices for the online store.']}, {'end': 661.241, 'segs': [{'end': 595.349, 'src': 'embed', 'start': 466.715, 'weight': 1, 'content': [{'end': 470.698, 'text': "But we'll talk more about that in part four.", 'start': 466.715, 'duration': 3.983}, {'end': 472.799, 'text': 'Choose a payment processor.', 'start': 471.298, 'duration': 1.501}, {'end': 479.564, 'text': 'Alright, here I am in Fireworks and I just threw out some custom text.', 'start': 472.819, 'duration': 6.745}, {'end': 482.927, 'text': 'Put a little drop shadow on it and gradient on the text.', 'start': 480.385, 'duration': 2.542}, {'end': 484.528, 'text': 'The file export wizard.', 'start': 482.987, 'duration': 1.541}, {'end': 487.369, 'text': "I'm in Fireworks CS4.", 'start': 486.428, 'duration': 0.941}, {'end': 491.713, 'text': "I'm going to save it as an optimized JPEG.", 'start': 487.409, 'duration': 4.304}, {'end': 493.595, 'text': "I'm going to use this as my logo.", 'start': 492.373, 'duration': 1.222}, {'end': 495.296, 'text': "It's going to sit up in the header.", 'start': 494.235, 'duration': 1.061}, {'end': 497.698, 'text': 'Export Find your website.', 'start': 496.137, 'duration': 1.561}, {'end': 501.442, 'text': "And at this point, we don't have a style folder yet.", 'start': 498.799, 'duration': 2.643}, {'end': 502.843, 'text': "So let's create that.", 'start': 502.042, 'duration': 0.801}, {'end': 514.859, 'text': "Style And inside the style folder that we just created, We're going to put this file in there, call it logo.", 'start': 504.665, 'duration': 10.194}, {'end': 516.58, 'text': "It'll be logo.jpg.", 'start': 515.198, 'duration': 1.382}, {'end': 518.181, 'text': 'Save as.', 'start': 517.64, 'duration': 0.541}, {'end': 519.561, 'text': 'All right.', 'start': 519.101, 'duration': 0.46}, {'end': 525.184, 'text': "All right, let's go into code view of the index.php homepage.", 'start': 521.402, 'duration': 3.782}, {'end': 529.525, 'text': "Change this to say, let's make it say store homepage.", 'start': 526.584, 'duration': 2.941}, {'end': 536.308, 'text': "You'll see in the head section here of the file, there's no styling yet set up.", 'start': 531.186, 'duration': 5.122}, {'end': 538.449, 'text': 'So you can go to the design view.', 'start': 536.408, 'duration': 2.041}, {'end': 541.823, 'text': 'Hit page properties down here in Dreamweaver.', 'start': 539.741, 'duration': 2.082}, {'end': 547.286, 'text': 'And you can apply some CSS just to get it going for yourself real easy.', 'start': 542.983, 'duration': 4.303}, {'end': 554.292, 'text': 'So if you want to change the default page font to say a standard Arial.', 'start': 548.167, 'duration': 6.125}, {'end': 556.813, 'text': "Let's press apply.", 'start': 555.953, 'duration': 0.86}, {'end': 559.775, 'text': "And you'll see that in your code view now.", 'start': 556.833, 'duration': 2.942}, {'end': 561.116, 'text': "Let's press okay.", 'start': 560.276, 'duration': 0.84}, {'end': 564.579, 'text': "Actually let's apply the link CSS here too.", 'start': 562.257, 'duration': 2.322}, {'end': 568.822, 'text': 'The link color I want to be always bright blue like that.', 'start': 565.92, 'duration': 2.902}, {'end': 572.791, 'text': 'and rollover.', 'start': 571.79, 'duration': 1.001}, {'end': 579.096, 'text': 'I want them to become black.', 'start': 572.791, 'duration': 6.305}, {'end': 581.218, 'text': 'there we go.', 'start': 579.096, 'duration': 2.122}, {'end': 584.46, 'text': 'okay, press, apply, okay.', 'start': 581.218, 'duration': 3.242}, {'end': 595.349, 'text': 'now go into the code view and you can see within the head section of that file there is now a style tag with some CSS inside of it.', 'start': 584.46, 'duration': 10.889}], 'summary': 'Creating and optimizing a logo in fireworks, adding css to the website.', 'duration': 128.634, 'max_score': 466.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ466715.jpg'}, {'end': 661.241, 'src': 'embed', 'start': 628.008, 'weight': 0, 'content': [{'end': 637.075, 'text': "save this style sheet in the style folder and let's name it style so it'll be style.css.", 'start': 628.008, 'duration': 9.067}, {'end': 642.258, 'text': 'save now in the index.php file.', 'start': 637.075, 'duration': 5.183}, {'end': 650.972, 'text': "we can remove this style tag altogether And right here in line 6, we'll add the link to the external style.css sheet.", 'start': 642.258, 'duration': 8.714}, {'end': 659.259, 'text': 'That way in each file that we have the category page, product list, product page, the cart, any page on our site.', 'start': 651.793, 'duration': 7.466}, {'end': 661.241, 'text': 'we can feed it that same style sheet.', 'start': 659.259, 'duration': 1.982}], 'summary': 'Save style.css in style folder, link in index.php for consistent styling across all pages.', 'duration': 33.233, 'max_score': 628.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ628008.jpg'}], 'start': 466.715, 'title': 'Logo, style & css setup', 'summary': 'Covers setting up a logo in fireworks cs4, saving it as an optimized jpeg, adding it to the style folder, and making changes to the index.php homepage. it also discusses creating and applying css in dreamweaver, including setting up styling, changing default page font, applying link css, and creating an external css style sheet for consistent application across multiple pages.', 'chapters': [{'end': 529.525, 'start': 466.715, 'title': 'Setting up logo and style folder', 'summary': 'Covers setting up a logo in fireworks cs4, saving it as an optimized jpeg, and adding it to the style folder, along with making changes to the index.php homepage.', 'duration': 62.81, 'highlights': ['Setting up a logo in Fireworks CS4 and saving it as an optimized JPEG. Utilizing Fireworks CS4, creating a custom logo with a drop shadow and gradient, and saving it as an optimized JPEG.', 'Adding the logo file to the style folder. Creating a style folder and placing the logo file in it.', "Making changes to the index.php homepage. Adjusting the index.php homepage to display 'store homepage' instead of the previous content."]}, {'end': 661.241, 'start': 531.186, 'title': 'Creating and applying css in dreamweaver', 'summary': 'Discusses creating and applying css in dreamweaver, including setting up styling, changing default page font, applying link css, and creating an external css style sheet for consistent application across multiple pages.', 'duration': 130.055, 'highlights': ['You can apply some CSS to change the default page font to a standard Arial, making it easy for yourself.', 'You can apply the link CSS to set the link color to always be bright blue and rollover to become black, providing a visual distinction for links.', "Creating an external CSS style sheet allows for consistent application of styling across multiple pages, enhancing the site's overall visual consistency.", 'The chapter also demonstrates the process of removing inline CSS and creating a separate external style sheet, providing a more organized and efficient approach to managing CSS.']}], 'duration': 194.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ466715.jpg', 'highlights': ['Creating an external CSS style sheet for consistent application across multiple pages.', 'Utilizing Fireworks CS4 to create a custom logo with a drop shadow and gradient.', "Making changes to the index.php homepage to display 'store homepage' instead of the previous content.", 'Applying link CSS to set the link color to always be bright blue and rollover to become black.', 'Setting up a logo in Fireworks CS4 and saving it as an optimized JPEG.', 'Creating a style folder and placing the logo file in it.', 'Removing inline CSS and creating a separate external style sheet for a more organized and efficient approach to managing CSS.', 'Applying CSS to change the default page font to a standard Arial.']}, {'end': 815.559, 'segs': [{'end': 723.482, 'src': 'embed', 'start': 661.381, 'weight': 0, 'content': [{'end': 664.143, 'text': 'That way, all of our links will be uniform throughout all pages.', 'start': 661.381, 'duration': 2.762}, {'end': 667.106, 'text': 'All of the styling will be uniform throughout all pages.', 'start': 664.744, 'duration': 2.362}, {'end': 672.15, 'text': "Okay, here's the link to your style sheet.", 'start': 669.308, 'duration': 2.842}, {'end': 678.961, 'text': "Okay, so in the homepage here, right there in the body tag, I'm going to slap a div.", 'start': 673.737, 'duration': 5.224}, {'end': 685.466, 'text': "So here's my div, and it says content for new div tag goes here inside of it.", 'start': 680.702, 'duration': 4.764}, {'end': 693.011, 'text': "So what I'm going to name this is div ID main wrapper.", 'start': 686.687, 'duration': 6.324}, {'end': 699.596, 'text': "And I'm going to align center it.", 'start': 697.695, 'duration': 1.901}, {'end': 706.374, 'text': 'That way, anything that I put within this div tag now will be centered on my page.', 'start': 701.772, 'duration': 4.602}, {'end': 709.395, 'text': "Okay, so let's pop in three more divs.", 'start': 707.535, 'duration': 1.86}, {'end': 716.619, 'text': 'One for the header, one for the page body section, or the main content section, and then one for the page footer.', 'start': 709.535, 'duration': 7.084}, {'end': 719.52, 'text': "And don't worry, we'll be using some tables soon enough.", 'start': 717.299, 'duration': 2.221}, {'end': 723.482, 'text': "This new one, let's give an ID.", 'start': 721.421, 'duration': 2.061}], 'summary': 'Creating uniform styling and layout for web pages with div tags and ids.', 'duration': 62.101, 'max_score': 661.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ661381.jpg'}, {'end': 786.095, 'src': 'embed', 'start': 758.283, 'weight': 1, 'content': [{'end': 764.501, 'text': "there's one for the main content of the page and there's one for the page footer.", 'start': 758.283, 'duration': 6.218}, {'end': 771.625, 'text': "so let's name these appropriately page footer, page content.", 'start': 764.501, 'duration': 7.124}, {'end': 778.85, 'text': 'there now you get a div set up for your page header, page content and page footer.', 'start': 771.625, 'duration': 7.225}, {'end': 783.693, 'text': "now you can style each one of those independently within your style sheet and I'll be showing you how to do that.", 'start': 778.85, 'duration': 4.843}, {'end': 786.095, 'text': "don't worry, now let's just go into our.", 'start': 783.693, 'duration': 2.402}], 'summary': 'Instructions on setting up and styling page sections within a style sheet.', 'duration': 27.812, 'max_score': 758.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ758283.jpg'}], 'start': 661.381, 'title': 'Creating uniform styling with div tags', 'summary': 'Covers creating uniform styling using div tags for page header, content, and footer, and styling them independently within the style sheet.', 'chapters': [{'end': 815.559, 'start': 661.381, 'title': 'Creating uniform styling with div tags', 'summary': 'Discusses creating uniform styling throughout all pages using div tags, including setting up div tags for page header, page content, and page footer, and styling them independently within the style sheet.', 'duration': 154.178, 'highlights': ['The chapter discusses creating uniform styling throughout all pages using div tags, including setting up div tags for page header, page content, and page footer, and styling them independently within the style sheet.', 'Setting up div tags for page header, page content, and page footer allows for independent styling within the style sheet.', 'Aligning the main wrapper div tag center ensures that anything placed within it will be centered on the page.']}], 'duration': 154.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ661381.jpg', 'highlights': ['The chapter discusses creating uniform styling using div tags for page header, content, and footer.', 'Setting up div tags for page header, content, and footer allows for independent styling within the style sheet.', 'Aligning the main wrapper div tag center ensures that anything placed within it will be centered on the page.']}, {'end': 1106.919, 'segs': [{'end': 855.511, 'src': 'embed', 'start': 815.559, 'weight': 0, 'content': [{'end': 817.94, 'text': 'all the styling in CSS that you can add to it.', 'start': 815.559, 'duration': 2.381}, {'end': 823.424, 'text': "Now let's just make one for the page content and page footer as well.", 'start': 819.121, 'duration': 4.303}, {'end': 830.826, 'text': "And I'll show you how this works in just a second and why we're doing it.", 'start': 826.445, 'duration': 4.381}, {'end': 839.328, 'text': "OK, now let's demonstrate why we're doing this and how it works.", 'start': 833.787, 'duration': 5.541}, {'end': 847.329, 'text': 'Say I wanted all of my text in my header to be the color of red.', 'start': 839.568, 'duration': 7.761}, {'end': 855.511, 'text': 'And then in the content, I wanted a color of green.', 'start': 850.27, 'duration': 5.241}], 'summary': 'Css styling added for page content and footer, with header text in red and content text in green.', 'duration': 39.952, 'max_score': 815.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ815559.jpg'}, {'end': 996.337, 'src': 'heatmap', 'start': 933.324, 'weight': 0.932, 'content': [{'end': 939.088, 'text': 'that way we have a more modular design and a modular layout.', 'start': 933.324, 'duration': 5.764}, {'end': 947.581, 'text': 'but what I do want for each one of those containers is So if you go back to the index page,', 'start': 939.088, 'duration': 8.493}, {'end': 953.025, 'text': "you can see there now it's a single line between each section.", 'start': 947.581, 'duration': 5.444}, {'end': 957.047, 'text': 'In the header div, we want to get our logo.', 'start': 954.466, 'duration': 2.581}, {'end': 962.992, 'text': "So here, I'm going to put, I think I'm going to put a table here.", 'start': 958.809, 'duration': 4.183}, {'end': 968.015, 'text': "I'm going to make it have one row, two columns.", 'start': 964.933, 'duration': 3.082}, {'end': 972.178, 'text': 'Okay Now you can see I have a table there.', 'start': 968.495, 'duration': 3.683}, {'end': 973.986, 'text': 'I can manipulate it a little bit.', 'start': 972.745, 'duration': 1.241}, {'end': 978.048, 'text': "And right here, I'm going to add, go into the style folder, and there's your logo.", 'start': 974.126, 'duration': 3.922}, {'end': 981.169, 'text': 'Alternate text, just say logo.', 'start': 979.688, 'duration': 1.481}, {'end': 987.432, 'text': 'Okay And you can put a link on that to your homepage.', 'start': 982.47, 'duration': 4.962}, {'end': 992.555, 'text': 'Index.php Or you can just put the whole HTTP to your website.', 'start': 988.133, 'duration': 4.422}, {'end': 996.337, 'text': "For that, I'm just going to put index.php.", 'start': 994.216, 'duration': 2.121}], 'summary': 'Creating a modular layout with a header containing a logo and a link to the homepage on index page.', 'duration': 63.013, 'max_score': 933.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ933324.jpg'}, {'end': 987.432, 'src': 'embed', 'start': 958.809, 'weight': 4, 'content': [{'end': 962.992, 'text': "So here, I'm going to put, I think I'm going to put a table here.", 'start': 958.809, 'duration': 4.183}, {'end': 968.015, 'text': "I'm going to make it have one row, two columns.", 'start': 964.933, 'duration': 3.082}, {'end': 972.178, 'text': 'Okay Now you can see I have a table there.', 'start': 968.495, 'duration': 3.683}, {'end': 973.986, 'text': 'I can manipulate it a little bit.', 'start': 972.745, 'duration': 1.241}, {'end': 978.048, 'text': "And right here, I'm going to add, go into the style folder, and there's your logo.", 'start': 974.126, 'duration': 3.922}, {'end': 981.169, 'text': 'Alternate text, just say logo.', 'start': 979.688, 'duration': 1.481}, {'end': 987.432, 'text': 'Okay And you can put a link on that to your homepage.', 'start': 982.47, 'duration': 4.962}], 'summary': 'Creating a table with one row and two columns, and adding a logo with a link to the homepage.', 'duration': 28.623, 'max_score': 958.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ958809.jpg'}, {'end': 1080.777, 'src': 'embed', 'start': 1016.818, 'weight': 1, 'content': [{'end': 1027.946, 'text': "the other column here with all kind of room that I can put whatever I want and it's very maneuverable and easy to adjust.", 'start': 1016.818, 'duration': 11.128}, {'end': 1032.782, 'text': 'in Dreamweaver here You can put as many columns as you want.', 'start': 1027.946, 'duration': 4.836}, {'end': 1036.523, 'text': 'You can also put another row in there, which we might wind up doing.', 'start': 1033.123, 'duration': 3.4}, {'end': 1038.384, 'text': "Let's put a little menu system.", 'start': 1036.544, 'duration': 1.84}, {'end': 1044.425, 'text': "Okay, so just like I said, I'm going to add another row real quick right here.", 'start': 1041.125, 'duration': 3.3}, {'end': 1047.606, 'text': "And it's going to be a menu system.", 'start': 1046.066, 'duration': 1.54}, {'end': 1050.466, 'text': "So let's just go ahead and merge these two cells.", 'start': 1048.346, 'duration': 2.12}, {'end': 1057.107, 'text': 'Inside of one, you can put your cursor, drag, and make sure you highlight both of them.', 'start': 1051.947, 'duration': 5.16}, {'end': 1059.908, 'text': 'Go down here, merge.', 'start': 1058.208, 'duration': 1.7}, {'end': 1063.749, 'text': 'It says merge selected cells using spans.', 'start': 1061.328, 'duration': 2.421}, {'end': 1067.791, 'text': "So now it's one big cell and you can put a bunch of links in there.", 'start': 1065.11, 'duration': 2.681}, {'end': 1080.777, 'text': 'So you can put home, link one, link two, link three, and so on and so forth.', 'start': 1067.831, 'duration': 12.946}], 'summary': 'Demonstrating the flexibility of adding columns and rows in dreamweaver, including merging cells for a menu system.', 'duration': 63.959, 'max_score': 1016.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ1016818.jpg'}], 'start': 815.559, 'title': 'Css styling and creating maneuverable tables in dreamweaver', 'summary': 'Emphasizes the importance of css styling for modular design, highlighting its ability to enable easy color changes and reduce manual page edits. it also demonstrates creating a maneuverable table in dreamweaver with a logo link and menu system.', 'chapters': [{'end': 957.047, 'start': 815.559, 'title': 'Css styling and modular design', 'summary': 'Explains the importance of css styling for different sections of a website, demonstrating how it allows for easy color changes and modular design, reducing the need to manually edit multiple pages. it also emphasizes the significance of setting up a modular layout from the beginning.', 'duration': 141.488, 'highlights': ['CSS styling allows for easy color changes in different sections of a website, reducing manual editing of multiple pages.', 'Setting up a modular layout from the beginning ensures a more modular design and layout, providing flexibility for future changes.', 'Demonstration of different text colors for header, content, and footer sections using CSS styling.', 'Illustration of how CSS styling enables a more modular design and layout, with changes reflected across multiple pages.']}, {'end': 1106.919, 'start': 958.809, 'title': 'Creating a maneuverable table in dreamweaver', 'summary': 'Demonstrates creating a maneuverable table with one row and two columns in dreamweaver, adding a logo with a link to the homepage, and merging cells to create a menu system.', 'duration': 148.11, 'highlights': ['Creating a maneuverable table with one row and two columns in Dreamweaver The speaker demonstrates creating a table with one row and two columns in Dreamweaver, allowing for easy manipulation and adjustments.', "Adding a logo with a link to the homepage Instructions are given to add a logo with alternate text and a link to the homepage, using 'index.php' as the link and setting the border to zero.", "Merging cells to create a menu system The process of merging cells to create a menu system is explained, including adding links such as 'home', 'link one', and 'link two' without assigning them to specific destinations yet."]}], 'duration': 291.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ815559.jpg', 'highlights': ['CSS styling enables easy color changes, reducing manual editing of multiple pages.', 'Modular layout ensures flexibility for future changes and a more modular design.', 'Demonstration of different text colors for header, content, and footer sections using CSS styling.', 'Creating a maneuverable table with one row and two columns in Dreamweaver.', 'Adding a logo with a link to the homepage in Dreamweaver.', 'Merging cells to create a menu system in Dreamweaver.']}, {'end': 1313.256, 'segs': [{'end': 1139.073, 'src': 'embed', 'start': 1107.979, 'weight': 0, 'content': [{'end': 1114.982, 'text': "It's just a way to make a link holder until you assign what you want it to be.", 'start': 1107.979, 'duration': 7.003}, {'end': 1129.287, 'text': "Actually this one's going to be definitely the index or you can go to your full http.com for the home link.", 'start': 1117.083, 'duration': 12.204}, {'end': 1139.073, 'text': "Okay, now we're going to make this header dynamic, and it'll be a region template that we can feed into each file of our website.", 'start': 1131.669, 'duration': 7.404}], 'summary': 'Creating a dynamic header template for website files.', 'duration': 31.094, 'max_score': 1107.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ1107979.jpg'}, {'end': 1218.089, 'src': 'embed', 'start': 1177.401, 'weight': 2, 'content': [{'end': 1178.481, 'text': 'put that code in.', 'start': 1177.401, 'duration': 1.08}, {'end': 1182.163, 'text': "that's just the div id page header.", 'start': 1178.481, 'duration': 3.682}, {'end': 1189.386, 'text': 'everything inside that div go back to your index file and where you took that div out.', 'start': 1182.163, 'duration': 7.223}, {'end': 1203.593, 'text': 'now you go to php, add a php block and now we just simply include once within parentheses.', 'start': 1189.386, 'duration': 14.207}, {'end': 1216.308, 'text': "we'll put template header this way if you ever need to make changes to the information within the template header,", 'start': 1203.593, 'duration': 12.715}, {'end': 1218.089, 'text': "you won't have to do it on your home page.", 'start': 1216.308, 'duration': 1.781}], 'summary': 'Add div id page header to index file, include in php block to simplify future changes.', 'duration': 40.688, 'max_score': 1177.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ1177401.jpg'}, {'end': 1313.256, 'src': 'embed', 'start': 1283.241, 'weight': 1, 'content': [{'end': 1287.224, 'text': "So let's look in design view, and you can see it looks exactly the same as it did before.", 'start': 1283.241, 'duration': 3.983}, {'end': 1290.506, 'text': "The header's there, even though it's only a PHP block.", 'start': 1287.264, 'duration': 3.242}, {'end': 1295.417, 'text': 'which is the smarter way to program a website if you have PHP capabilities, I think.', 'start': 1291.633, 'duration': 3.784}, {'end': 1303.085, 'text': "We'll continue on in part two, where we get some products going and list them on the home page,", 'start': 1296.038, 'duration': 7.047}, {'end': 1307.67, 'text': "and we build the MySQL that's going to hold all of our inventory.", 'start': 1303.085, 'duration': 4.585}, {'end': 1313.256, 'text': "We'll put some products in, we'll get them to list dynamically, and we'll get the rest of these pages going.", 'start': 1308.19, 'duration': 5.066}], 'summary': 'Using php for website design can lead to more efficient programming. part two will focus on listing products and building a mysql inventory.', 'duration': 30.015, 'max_score': 1283.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ1283241.jpg'}], 'start': 1107.979, 'title': 'Dynamic website templating', 'summary': 'Explains how to make the website header dynamic with php, allowing for the inclusion of a region template into each file, reducing the need to modify the home page in case of changes. it also discusses dynamically rendering headers and footers in a website using php, hinting at upcoming topics such as listing products dynamically and building a mysql inventory.', 'chapters': [{'end': 1218.089, 'start': 1107.979, 'title': 'Website header dynamic code', 'summary': 'Explains how to make the website header dynamic, allowing for the inclusion of a region template into each file, reducing the need to modify the home page in case of changes, and the code involves utilizing php to include the template header.', 'duration': 110.11, 'highlights': ['The process involves making the website header dynamic by creating a region template that can be included in each file of the website. By making the website header dynamic, a region template is created to be included in every file, providing a consistent header across the website.', 'The code utilizes PHP to include the template header, ensuring that any changes to the information within the template header do not require modification of the home page. The PHP code enables the inclusion of the template header, allowing for easy modification of the header without the need to change the home page.', 'Instructions are provided for extracting the code for the entire div ID page header and using it within a new template header file. The process involves extracting the code for the entire div ID page header and saving it in a new template header file for future use.']}, {'end': 1313.256, 'start': 1218.089, 'title': 'Dynamic website templating', 'summary': 'Discusses the process of dynamically rendering headers and footers in a website using php, emphasizing the benefits of this approach and hinting at upcoming topics such as listing products dynamically and building a mysql inventory.', 'duration': 95.167, 'highlights': ['The chapter emphasizes dynamically rendering headers and footers in a website using PHP, which allows for consistent changes across all pages and is deemed the smarter way to program a website.', 'The transcript hints at upcoming topics such as listing products dynamically and building a MySQL inventory in the next part of the tutorial.', 'The process involves changing template files to ensure consistent changes across all pages on the website.']}], 'duration': 205.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/65gV8JOgWkQ/pics/65gV8JOgWkQ1107979.jpg', 'highlights': ['The process involves making the website header dynamic by creating a region template that can be included in each file of the website.', 'The chapter emphasizes dynamically rendering headers and footers in a website using PHP, which allows for consistent changes across all pages and is deemed the smarter way to program a website.', 'The code utilizes PHP to include the template header, ensuring that any changes to the information within the template header do not require modification of the home page.']}], 'highlights': ['The chapter emphasizes dynamically rendering headers and footers in a website using PHP, which allows for consistent changes across all pages and is deemed the smarter way to program a website.', 'The process involves making the website header dynamic by creating a region template that can be included in each file of the website.', 'The chapter discusses creating uniform styling using div tags for page header, content, and footer.', 'Setting up div tags for page header, content, and footer allows for independent styling within the style sheet.', 'Aligning the main wrapper div tag center ensures that anything placed within it will be centered on the page.', 'The chapter introduces the e-commerce website building lesson series, emphasizing the use of PHP as the dynamic scripting language and MySQL database for building the shopping cart, both being free and open source.', "The use of PHP and MySQL is highlighted as necessary for the system, and it's explained that they work on pretty much any website host server online.", 'The simplicity of PHP and MySQL is mentioned, assuring the audience that the explanation will be painless, even for those unfamiliar with the technologies.', 'The importance of having HTML and CSS skills is emphasized for understanding web page layout.', 'Setting up the root folder for the website is crucial, and the process is detailed, including creating a new PHP file and saving it with the index.php title.', 'Laying out all the basic pages and scripts needed to run the online store system in Dreamweaver CS4 is prioritized before adding additional elements to the pages.', 'The process of creating category and product list pages It explains the steps involved in creating category.php and product_list.php pages to display items under different categories.', 'Creating product list, individual product display, and shopping cart functionality The chapter covers the setup of product list, individual product display, and shopping cart functionality within the website.', 'Displaying items under different categories The pages allow for the display of items like shirts, jeans, socks, and shoes under various categories, enhancing user navigation.', 'Creating necessary files and folders for the online store system The process involves creating essential files such as product.php, cart.php, Render Cart, and Connect to MySQL, as well as setting up folders including store scripts.', 'Allowing users to click and view the items The pages enable users to click on categories and view the items, improving user experience and interaction.', 'PayPal is the most widely used and trusted payment gateway in the world, known for its security and dominance in online transactions.', "The PayPal IPN script enables tracking of customer purchases, including details such as items purchased, customer's name, and email address, providing valuable data for the online store.", 'Emphasizes the need for informing customers about data collection in the terms of use and the potential requirement of obtaining an SSL certificate for secure transactions.', 'Highlights the availability of other online payment gateway options besides PayPal, indicating the importance of considering alternative choices for the online store.', 'Creating an external CSS style sheet for consistent application across multiple pages.', 'Utilizing Fireworks CS4 to create a custom logo with a drop shadow and gradient.', "Making changes to the index.php homepage to display 'store homepage' instead of the previous content.", 'Applying link CSS to set the link color to always be bright blue and rollover to become black.', 'Setting up a logo in Fireworks CS4 and saving it as an optimized JPEG.', 'Creating a style folder and placing the logo file in it.', 'Removing inline CSS and creating a separate external style sheet for a more organized and efficient approach to managing CSS.', 'Applying CSS to change the default page font to a standard Arial.', 'The chapter discusses creating uniform styling using div tags for page header, content, and footer.', 'Setting up div tags for page header, content, and footer allows for independent styling within the style sheet.', 'Aligning the main wrapper div tag center ensures that anything placed within it will be centered on the page.', 'CSS styling enables easy color changes, reducing manual editing of multiple pages.', 'Modular layout ensures flexibility for future changes and a more modular design.', 'Demonstration of different text colors for header, content, and footer sections using CSS styling.', 'Creating a maneuverable table with one row and two columns in Dreamweaver.', 'Adding a logo with a link to the homepage in Dreamweaver.', 'Merging cells to create a menu system in Dreamweaver.']}