{"id":10049864,"date":"2019-12-03T19:29:50","date_gmt":"2019-12-03T17:29:50","guid":{"rendered":"https:\/\/www.fh-joanneum.at\/?post_type=projects&#038;p=49864"},"modified":"2020-01-22T11:23:58","modified_gmt":"2020-01-22T09:23:58","slug":"coding-of-a-shop-system-structure-and-user-interface","status":"publish","type":"project","link":"https:\/\/www.fh-joanneum.at\/en\/project\/coding-of-a-shop-system-structure-and-user-interface\/","title":{"rendered":"Coding of a Shop System: Structure and User Interface"},"content":{"rendered":"<div class=\"wp-block-sidebar-layout-container margin-bottom-normal\">\n    <div\n        class=\"container-lg\"\n        style=\"--bs-gutter-x: 0;\"\n    >\n        <div\n            class=\"row\"\n            style=\"--bs-gutter-x: 0;\"\n        >\n            \n<div class=\"col-12 col-md-3 order-1 order-md-0 sidebar\">\n            \n<div\n    id=\"\"\n    class=\"wp-block-institute-card margin-bottom-normal\"\n>\n    <div class=\"container-lg\">\n                                    <div class=\"row justify-content-around\">\n                    <div class=\"col-8 col-sm-6 col-md-12\">\n                        <a\n        class=\"medien-und-design institute-card\"\n        href=\"https:\/\/www.fh-joanneum.at\/en\/institute\/design-communication\/\"\n        target=\"_self\"\n    >\n                            <div class=\"major-bg-color\">\n            <div class=\"wrapper\">\n                <div class=\"header\">\n                    <span>Institute<\/span>\n                <\/div>\n                <h4>Design &amp; Communication<\/h4>\n            <\/div>\n        <\/div>\n            <span><\/span>\n                    <\/a>\n                    <\/div>\n                <\/div>\n                        <\/div>\n<\/div>\n\n<div id=\"\" class=\"wp-block-fact-box margin-bottom-normal\">\n  <div class=\"container-lg\">\n        <div class=\"row justify-content-around\">\n            <div class=\"col-8 col-sm-6 col-md-12\">\n                <div class=\"card border border-light p-3\">\n                    <ul class=\"list-unstyled mb-0\">\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Bachelor\\&#039;s Thesis\n                          <\/div>\n                          <div class=\"value fw-bold\">2019<\/div>\n                        <\/li>\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Author\n                          <\/div>\n                          <div class=\"value fw-bold\">Barbara AICHINGER<\/div>\n                        <\/li>\n                                              <li\n                          class=\"\"\n                        >\n                          <div class=\"label mb-1\">\n                            Supervisor\n                          <\/div>\n                          <div class=\"value fw-bold\">Doris ULRICH<\/div>\n                        <\/li>\n                                          <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<\/div>\n\n<div class=\"d-none d-md-flex col-md-1 seperator-column\"><\/div>\n<div class=\"col-12 col-md-8 order-0 order-md-1\">\n     \n<div\n    id=\"\"\n    class=\"wp-block-intro-text margin-bottom-normal\"\n>\n    <div class=\"container-lg\">\n        <div class=\"row\">\n            <div class=\"col\">\n                <div class=\"major-text-color fst-italic\"><div class=\"module-migration-intro-text\">\n<p class=\"field-migration-intro_textfield\">\n<p>Countless elements are necessary to run a successful online shop. While the work of frontend developers is visible to the general public, the essential basics remain hidden in the background. <\/p>\n<\/p>\n<\/div>\n<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div id=\"\" class=\"wp-block-text-content margin-bottom-normal\">\n    <div class=\"container-lg\">\n        <div class=\"row\">\n            <div class=\"col\">\n                <p>The design of a digital shop system for Austrian handcrafted products is the startingpoint of this bachelor thesis. Such a system consisting of the front-end user interface, the back-end for content management and a relational database. Particular focus is placed on coding in the technical and asthetical sense. The structure of the shop is thus outlined &ndash; from programming the code with HTML5, CSS3, PHP, MySQL and Javascript to the functions of text and images. &ldquo;Coding a shop system&rdquo; gives a concise insight into the development effort of such a project. Both the visual design and the programming scripts that are invisible to the user must work properly in order to successfully create a small, but fancy digital store.<\/p>\n\n            <\/div>\n        <\/div>\n            <\/div>\n<\/div>\n\n<div\n    id=\"\"\n    class=\"wp-block-image-slider margin-bottom-normal\"\n>\n    <div class=\"container-lg\">\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div class=\"swiper-outer-wrapper\">\n                    <div class=\"image-header\">\n                        <div class=\"swiper-navigation\">\n                            <div class=\"swiper-button-prev-custom\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M8 13L2 7L8 1\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                            <\/div>\n                            <div class=\"swiper-button-next-custom\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M1 1L7 7L1 13\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"swiper image-slider-swiper\">\n                        <div class=\"swiper-wrapper\">\n                                                                                                <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5-768x386.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5-768x386.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5-1024x515.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5-1024x515.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 2000px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-5.jpg\"\n        alt=\"Coding of a Shop System: Structure and User Interface 4\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3-768x666.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3-768x666.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3-1024x888.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3-1024x888.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 2000px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-3.jpg\"\n        alt=\"Coding of a Shop System: Structure and User Interface 2\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2-768x730.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2-768x730.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2-1024x974.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2-1024x974.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1720px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-2.jpg\"\n        alt=\"Coding of a Shop System: Structure and User Interface 1\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-768x460.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-768x460.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-1024x613.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface-1024x613.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1720px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2019\/12\/coding-of-a-shop-system-structure-and-user-interface.jpg\"\n        alt=\"Coding of a Shop System: Structure and User Interface\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                            <\/div>\n                                                                                    <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-navigation-pagination\">\n                        <div class=\"swiper-button-prev-custom\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M8 13L2 7L8 1\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                        <\/div>\n                        <div class=\"swiper-pagination\"><\/div>\n                        <div class=\"swiper-button-next-custom\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M1 1L7 7L1 13\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<\/div>\n\n\n        <\/div>\n    <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":26,"featured_media":10049865,"template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10049864"}],"collection":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/users\/26"}],"version-history":[{"count":0,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10049864\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media\/10049865"}],"wp:attachment":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media?parent=10049864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}