15 ECommerce DW Seja bem-vindo ao nosso novo curso ECOMMERCE DESENVOLVIMENTO COM + PHP + MYSQL + ADT. PROJECTO PARA SER ENTREGUE NESTA SEGUNDA FASE: Área administrativa (continuação). PARTE 2 Vamos acrescentar duas opções para Produtos e Categorias: Copia o código que se segue para todos os ficheiros: <li> <a href="#" title="produtos">produtos</a> <ul> <li> <a href="#" title="incluir Produtos">Incluir Produtos</a> </li> <li> <a href="#" title="editar Produtos">Editar Produtos</a> </li> </ul> </li> <li> <a href="#" title="categorias">categorias</a> <ul> <li> <a href="#" title="incluir Categorias">Incluir Categorias</a> </li> <li> <a href="#" title="editar Categorias">Editar Categorias</a> </li> </ul> </li> Financiado pelo FSE Pág: 1
Com base no modelo, vamos criar outro ficheiro ins_categorias.php, através do Save As ins_categorias.php. Title: Agora, vamos começar a trabalhar com o Developer Toolbox. Insert Record Form Wizard Financiado pelo FSE Pág: 2
Financiado pelo FSE Pág: 3
Seleccione o campo Imagem e adicione o comportamento UPLOAD and RESIZE IMAGE. Vamos criar um novo ficheiro act_categorias.php, através do modelo. CREATE DYNAMIC FORM WIZARD Financiado pelo FSE Pág: 4
Financiado pelo FSE Pág: 5
Apague os dados: Vamos criar um novo ficheiro edit_categorias.php, através do modelo. Agora vamos usar Financiado pelo FSE Pág: 6
Agora vamos alterar o campo imagem de forma a colocar nesse local a própria imagem. Financiado pelo FSE Pág: 7
Financiado pelo FSE Pág: 8
Podemos colocar as imagens com tamanho 38x38. Agora vamos importar uma tabela de modelos com os campos de configuração. Copiamos a informação do script para o PHPMyAdmin. Agora vamos ao modelo.php e acrescentamos um subitem com o nome Actualizar Dados do Site, conforme a seguinte imagem: Financiado pelo FSE Pág: 9
Agora vamos fazer as hiperligações. <li> <a href="#" title="produtos">produtos</a> <ul> <li> <a href="ins_produtos.php" title="incluir Produtos">Incluir Produtos</a> </li> <li> <a href="edit_produtos.php" title="editar Produtos">Editar Produtos</a> </li> </ul> </li> <li> <a href="#" title="categorias">categorias</a> <ul> <li> <a href="ins_categorias.php" title="incluir Categorias">Incluir Categorias</a> </li> <li> <a href="edit_categorias.php" title="editar Categorias">Editar Categorias</a> </li> </ul> </li> <li> <a href="#" title="banners">banners</a> </li> <li> <a href="#" title="configurar">configurar</a> <ul> <li> <a href="#" title="actualizar Dados do Site">Actualizar Dados do Site</a> </li> </ul> </li> Copiar esse código para os seguintes ficheiros: Financiado pelo FSE Pág: 10
Nesta fase vamos utilizar o editor. Copia os dados do ficheiro comprimido para a pasta includes. De seguida vamos colocar o código disponível no ficheiro tinymce word, dentro do <head> dos ficheiros ins_produtos.php e ins_categorias.php. <script src="../includes/tiny_mce/tiny_mce.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> tinymce.init({ mode : "textareas", theme : "advanced", plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen", theme_advanced_buttons1_add_before : "save,newdocument,separator", theme_advanced_buttons1_add : "fontselect,fontsizeselect", theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor", theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator", theme_advanced_buttons3_add_before : "tablecontrols,separator", theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", content_css : "example_word.css", content_css : "http://localhost/mgctpw/templates/mambo_admin_blue/css/template_css.css", plugi2n_insertdate_dateformat : "%Y-%m-%d", plugi2n_insertdate_timeformat : "%H:%M:%S", external_link_list_url : "example_link_list.js", external_image_list_url : "example_image_list.js", flash_external_list_url : "example_flash_list.js", file_browser_callback : "filebrowsercallback", paste_use_dialog : false, theme_advanced_resizing : true, theme_advanced_resize_horizontal : false, theme_advanced_link_targets : "_something=my somthing;_something2=my somthing2;_something3=my somthing3;", paste_auto_cleanup_on_paste : true, paste_convert_headers_to_strong : false, paste_strip_class_attributes : "all", paste_remove_spans : false, paste_remove_styles : false }); function filebrowsercallback(field_name, url, type, win) { // This is where you insert your custom filebrowser logic alert("filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type); } </script> // Insert new URL, this would normaly be done in a popup win.document.forms[0].elements[field_name].value = "someurl.htm"; De seguida, vamos tratar da opção de Actualização de Dados do Site. Com base no modelo SAVE AS com o nome act_dados.php e configuramos o cabeçalho, nome, etc. De seguida iremos criar um UPDATE RECORD FORM WIZARD. Financiado pelo FSE Pág: 11
1º Passo 2º Passo Vamos alterar dois campos para TextArea de forma a poder suportar o tinymce. 3º Passo Altere o tamanho das TEXT AREA para 80 x 15. Não se esqueça de copiar o código do ficheiro tinymce WORD para o <head>. Altere a linha: Vamos testar para isso temos que no ficheiro act_dados.php no link acrescentar: <li> <a href="act_dados.php?id=1" title="actualizar Dados do Site">Actualizar Dados do Site</a> </li> Financiado pelo FSE Pág: 12
Agora vamos criar uma nova tabela com o nome formapagamento, com quatro campos. Financiado pelo FSE Pág: 13
Vamos inserir um registo. Vamos acrescentar uma opção de menu no MODELO. Guarde o ficheiro e crie um novo ficheiro com base nesse com o nome act_formapag.php De seguida iremos criar um UPDATE RECORD FORM WIZARD. 1º Passo 2º Passo Financiado pelo FSE Pág: 14
3º Passo Todos os campos obrigatórios. De seguida vamos trabalhar com os BANNERS. É muito similar ao actualizar Dados do Site e Forma de Pagamento. Vamos acrescentar uma opção de menu no MODELO. Guarde o ficheiro e crie um novo ficheiro com base nesse com o nome act_banners.php Vamos usar o script GERAL.SQL para importar a tabela e os dados. Financiado pelo FSE Pág: 15
Agora voltamos ao e fazemos algumas alterações no ficheiro act_banners.php, nomeadamente o title, etc. De seguida iremos criar um UPDATE RECORD FORM WIZARD. 1º Passo Financiado pelo FSE Pág: 16
2º Passo 3º Passo Alterar o title e o botão. Agora vamos alterar este formulário. Financiado pelo FSE Pág: 17
Altere a configuração da data. Agora copie a pasta uploads para dentro do seu projecto. De seguida, vamos colocar o editor de texto no ficheiro act_banners.php Não se esqueça das medidas dos campos. Falta o DATE PICKER. Parabéns. Financiado pelo FSE Pág: 18