Ir para conteúdo
Crislais

PHP não cadastra dados no Banco de Dados - Plugin Jquery FileUpload

Recommended Posts

Olá Pessoal, pretendo utilizar o Plugin Jquery FileUpload, a documentação do mesmo está em: https://blueimp.github.io/jQuery-File-Upload/ 

Realizei a instalação do plugin no servidor local, conforme a documentação.

Surgiu a necessidade de cadastrar os dados no banco de dados, MySQL, e assim utilizei a seguinte documentação: https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-MySQL-database-integration 

O problema é: essa documentação não realiza o cadastro no banco como deveria, encontrei muitas pessoas na internet com o mesmo problema, e não encontrei algum artigo que ajudasse em português ou inglês. Estou a muitos dias tentando resolver esse problema, acredito que a função handle_file_upload não está funcionando, ou chamada corretamente, ou o botão Start upload

Segue meu código e a estrutura da tabela, que para facilitar o entendimento estou utilizando a mesma da documentação do GitHub

Desde já agradeço qualquer ajuda ou dica.

 

Arquivo index.php 

Spoiler

<?php //session_start();
//require('arlg.php');
//require('confere.php');

$options = array(
    'delete_type' => 'POST',
    'db_host' => 'localhost',
    'db_user' => 'root',
    'db_pass' => ' ',
    'db_name' => 'area',
    'db_table' => 'files'
);

error_reporting(E_ALL | E_STRICT);
require('server/php/UploadHandler.php');

class CustomUploadHandler extends UploadHandler {

    protected function initialize() {
        $this->db = new mysqli(
            $this->options['delete_type'],
            $this->options['db_host'],
            $this->options['db_user'],
            $this->options['db_pass'],
            $this->options['db_name'],
            $this->options['db_table']
        );
        parent::initialize();
       $this->db->close();
    }

    protected function handle_form_data($file, $index) {
        $file->title = @$_REQUEST['title'][$index];
        $file->description = @$_REQUEST['description'][$index];
    }

    protected function handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null, $content_range = null) {
        $file = parent::handle_file_upload(
            $uploaded_file, $name, $size, $type, $error, $index, $content_range
        );
        if (empty($file->error)) {
            $sql = "INSERT INTO '".$this->options['db_table']
                ."' ('name', 'size', 'type', 'url', title', 'description')"
                ." VALUES (?, ?, ?, ?, ?,?)";
                echo $sql;
            $query = $this->db->prepare($sql);
            $query->bind_param(
                'sissss',
                $file->name,
                $file->size,
                $file->type,
                $file->url,
                $file->title,
                $file->description
            );
            $query->execute();
            $file->id = $this->db->insert_id;
        }
        return $file;
    }

    protected function set_additional_file_properties($file) {
        parent::set_additional_file_properties($file);
        if ($_SERVER['REQUEST_METHOD'] === 'GET') {
            $sql = "SELECT 'id', 'type', 'title', 'description' FROM '"
                .$this->options['db_table']."' WHERE 'name'=?";
            $query = $this->db->prepare($sql);
            $query->bind_param('s', $file->name);
            $query->execute();
            $query->bind_result(
                $id,
                $type,
                $title,
                $description
            );
            while ($query->fetch()) {
                $file->id = $id;
                $file->type = $type;
                $file->title = $title;
                $file->description = $description;
            }
        }
    }

    public function delete($print_response = true) {
        $response = parent::delete(false);
        foreach ($response as $name => $deleted) {
            if ($deleted) {
                $sql = 'DELETE FROM `'
                    .$this->options['db_table'].'` WHERE `name`=?';
                $query = $this->db->prepare($sql);
                $query->bind_param('s', $name);
                $query->execute();
            }
        } 
        return $this->generate_response($response, $print_response);
    }

}

//$upload_handler = new CustomUploadHandler($options);

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Área Restrita Lógika Sites</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon" />
<meta name="robots" content="noindex,nofollow"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script> 
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- blueimp Gallery script -->
<script src="https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="js/main.js"></script>

</head>
<body>
<?php //include('top.php');?>
<div class="container-fluid content">
  <div class="row">
    <?php //include('menu.php');?>
    <div class="main ">
      <div class="page-header">
        <div class="pull-left">
          <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="adm-inicio.php"><i class="icon fa fa-home"></i>Início</a></li>
            <li><a href="adm-fotos-cadastrar.php"><i class="icon fa fa-globe"></i>Galeria de Fotos</a></li>
            <li class="active"><i class="fa fa-pencil"></i>Cadastrar Galeria de Fotos</li>
          </ol>
        </div>
        <div class="pull-right">
          <h2>Galerias de Fotos</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="panel panel-default bk-bg-white">
            <div class="panel-heading bk-bg-white">
              <h6><i class="fa fa-globe red"></i>Cadastrar Galeria</h6>
              <div class="panel-actions"> <a href="#" class="btn-minimize"><i class="fa fa-caret-up"></i></a> <a href="#" class="btn-close"><i class="fa fa-times"></i></a> </div>
            </div>
            <?php
       // $sql_tamanho = "SELECT * FROM stlg_tano_imns";
       // $trata_tamanho = $banco->query($sql_tamanho);
       // $trata_tamanho = $trata_tamanho ->fetch(PDO::FETCH_ASSOC);
      ?>
            <div class="panel-body">
              

         <form id="fileupload" action="https://jquery-file-upload.appspot.com/" method="GET" enctype="multipart/form-data">
      
        <noscript><input  name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
      
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
            
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit"  method="POST" id="fileuploadsubmit" class="btn btn-primary start fileuploadsubmit">
                    <i class="glyphicon glyphicon-upload"></i> 
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </form>
    <br>
    
</div>
<
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
            <p class="title"><strong>{%=file.title||''%}</strong></p>
            <p class="description">{%=file.description||''%}</p>
        </td>

        <td>
            <label class="title">
                <span>Title:</span><br>
                <input name="title[]" class="form-control">
            </label>
            <label class="description">
                <span>Description:</span><br>
                <input name="description[]" class="form-control">
            </label>       
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>  <p class="title"><strong>{%=file.title||''%}</strong></p>
            <p class="description">{%=file.description||''%}</p>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>

<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->

</body>
</html>

 

Arquivo UploadHandler.php - Localizado detro da pasta server/php/

Spoiler

<?php
/*
 * jQuery File Upload Plugin PHP Class
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */

class UploadHandler
{

    protected $options;

    // PHP File Upload error message codes:
    // http://php.net/manual/en/features.file-upload.errors.php
    protected $error_messages = array(
        1 => 'The uploaded file exceeds the upload_max_filesize directive in php.ini',
        2 => 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
        3 => 'The uploaded file was only partially uploaded',
        4 => 'No file was uploaded',
        6 => 'Missing a temporary folder',
        7 => 'Failed to write file to disk',
        8 => 'A PHP extension stopped the file upload',
        'post_max_size' => 'The uploaded file exceeds the post_max_size directive in php.ini',
        'max_file_size' => 'File is too big',
        'min_file_size' => 'File is too small',
        'accept_file_types' => 'Filetype not allowed',
        'max_number_of_files' => 'Maximum number of files exceeded',
        'max_width' => 'Image exceeds maximum width',
        'min_width' => 'Image requires a minimum width',
        'max_height' => 'Image exceeds maximum height',
        'min_height' => 'Image requires a minimum height',
        'abort' => 'File upload aborted',
        'image_resize' => 'Failed to resize image'
    );

    const IMAGETYPE_GIF = 1;
    const IMAGETYPE_JPEG = 2;
    const IMAGETYPE_PNG = 3;

    protected $image_objects = array();

    public function __construct($options = null, $initialize = true, $error_messages = null) {
        $this->response = array();
        $this->options = array(
            'script_url' => $this->get_full_url().'/'.$this->basename($this->get_server_var('SCRIPT_NAME')),
            'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',
            'upload_url' => $this->get_full_url().'/files/',
            'input_stream' => 'php://input',
            'user_dirs' => false,
            'mkdir_mode' => 0755,
            'param_name' => 'files',
            // Set the following option to 'POST', if your server does not support
            // DELETE requests. This is a parameter sent to the client:
            'delete_type' => 'POST',
            'access_control_allow_origin' => '*',
            'access_control_allow_credentials' => false,
            'access_control_allow_methods' => array(
                'OPTIONS',
                'HEAD',
                'GET',
                'POST',
                'PUT',
                'PATCH',
                'DELETE'
            ),
            'access_control_allow_headers' => array(
                'Content-Type',
                'Content-Range',
                'Content-Disposition'
            ),
            // By default, allow redirects to the referer protocol+host:
            'redirect_allow_target' => '/^'.preg_quote(
              parse_url($this->get_server_var('HTTP_REFERER'), PHP_URL_SCHEME)
                .'://'
                .parse_url($this->get_server_var('HTTP_REFERER'), PHP_URL_HOST)
                .'/', // Trailing slash to not match subdomains by mistake
              '/' // preg_quote delimiter param
            ).'/',
            // Enable to provide file downloads via GET requests to the PHP script:
            //     1. Set to 1 to download files via readfile method through PHP
            //     2. Set to 2 to send a X-Sendfile header for lighttpd/Apache
            //     3. Set to 3 to send a X-Accel-Redirect header for nginx
            // If set to 2 or 3, adjust the upload_url option to the base path of
            // the redirect parameter, e.g. '/files/'.
            'download_via_php' => false,
            // Read files in chunks to avoid memory limits when download_via_php
            // is enabled, set to 0 to disable chunked reading of files:
            'readfile_chunk_size' => 10 * 1024 * 1024, // 10 MiB
            // Defines which files can be displayed inline when downloaded:
            'inline_file_types' => '/\.(gif|jpe?g|png)$/i',
            // Defines which files (based on their names) are accepted for upload.
            // By default, only allows file uploads with image file extensions.
            // Only change this setting after making sure that any allowed file
            // types cannot be executed by the webserver in the files directory,
            // e.g. PHP scripts, nor executed by the browser when downloaded,
            // e.g. HTML files with embedded JavaScript code.
            // Please also read the SECURITY.md document in this repository.
            'accept_file_types' => '/\.(gif|jpe?g|png)$/i',
            // Replaces dots in filenames with the given string.
            // Can be disabled by setting it to false or an empty string.
            // Note that this is a security feature for servers that support
            // multiple file extensions, e.g. the Apache AddHandler Directive:
            // https://httpd.apache.org/docs/current/mod/mod_mime.html#addhandler
            // Before disabling it, make sure that files uploaded with multiple
            // extensions cannot be executed by the webserver, e.g.
            // "example.php.png" with embedded PHP code, nor executed by the
            // browser when downloaded, e.g. "example.html.gif" with embedded
            // JavaScript code.
            'replace_dots_in_filenames' => '-',
            // The php.ini settings upload_max_filesize and post_max_size
            // take precedence over the following max_file_size setting:
            'max_file_size' => null,
            'min_file_size' => 1,
            // The maximum number of files for the upload directory:
            'max_number_of_files' => null,
            // Reads first file bytes to identify and correct file extensions:
            'correct_image_extensions' => false,
            // Image resolution restrictions:
            'max_width' => null,
            'max_height' => null,
            'min_width' => 1,
            'min_height' => 1,
            // Set the following option to false to enable resumable uploads:
            'discard_aborted_uploads' => true,
            // Set to 0 to use the GD library to scale and orient images,
            // set to 1 to use imagick (if installed, falls back to GD),
            // set to 2 to use the ImageMagick convert binary directly:
            'image_library' => 1,
            // Uncomment the following to define an array of resource limits
            // for imagick:
            /*
            'imagick_resource_limits' => array(
                imagick::RESOURCETYPE_MAP => 32,
                imagick::RESOURCETYPE_MEMORY => 32
            ),
            */
            // Command or path for to the ImageMagick convert binary:
            'convert_bin' => 'convert',
            // Uncomment the following to add parameters in front of each
            // ImageMagick convert call (the limit constraints seem only
            // to have an effect if put in front):
            /*
            'convert_params' => '-limit memory 32MiB -limit map 32MiB',
            */
            // Command or path for to the ImageMagick identify binary:
            'identify_bin' => 'identify',
            'image_versions' => array(
                // The empty image version key defines options for the original image.
                // Keep in mind: these image manipulations are inherited by all other image versions from this point onwards. 
                // Also note that the property 'no_cache' is not inherited, since it's not a manipulation.
                '' => array(
                    // Automatically rotate images based on EXIF meta data:
                    'auto_orient' => true
                ),
                // You can add arrays to generate different versions.
                // The name of the key is the name of the version (example: 'medium'). 
                // the array contains the options to apply.
                /*
                'medium' => array(
                    'max_width' => 800,
                    'max_height' => 600
                ),
                */
                'thumbnail' => array(
                    // Uncomment the following to use a defined directory for the thumbnails
                    // instead of a subdirectory based on the version identifier.
                    // Make sure that this directory doesn't allow execution of files if you
                    // don't pose any restrictions on the type of uploaded files, e.g. by
                    // copying the .htaccess file from the files directory for Apache:
                    //'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/thumb/',
                    //'upload_url' => $this->get_full_url().'/thumb/',
                    // Uncomment the following to force the max
                    // dimensions and e.g. create square thumbnails:
                    // 'auto_orient' => true,
                    // 'crop' => true,
                    // 'jpeg_quality' => 70,
                    // 'no_cache' => true, (there's a caching option, but this remembers thumbnail sizes from a previous action!)
                    // 'strip' => true, (this strips EXIF tags, such as geolocation)
                    'max_width' => 80, // either specify width, or set to 0. Then width is automatically adjusted - keeping aspect ratio to a specified max_height.
                    'max_height' => 80 // either specify height, or set to 0. Then height is automatically adjusted - keeping aspect ratio to a specified max_width.
                )
            ),
            'print_response' => true
        );
        if ($options) {
            $this->options = $options + $this->options;
        }
        if ($error_messages) {
            $this->error_messages = $error_messages + $this->error_messages;
        }
        if ($initialize) {
            $this->initialize();
        }
    }

    protected function initialize() {
        switch ($this->get_server_var('REQUEST_METHOD')) {
            case 'OPTIONS':
            case 'HEAD':
                $this->head();
                break;
            case 'GET':
                $this->get($this->options['print_response']);
                break;
            case 'PATCH':
            case 'PUT':
            case 'POST':
                $this->post($this->options['print_response']);
                break;
            case 'DELETE':
                $this->delete($this->options['print_response']);
                break;
            default:
                $this->header('HTTP/1.1 405 Method Not Allowed');
        }
    }

    protected function get_full_url() {
        $https = !empty($_SERVER['HTTPS']) && strcasecmp($_SERVER['HTTPS'], 'on') === 0 ||
            !empty($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
                strcasecmp($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') === 0;
        return
            ($https ? 'https://' : 'http://').
            (!empty($_SERVER['REMOTE_USER']) ? $_SERVER['REMOTE_USER'].'@' : '').
            (isset($_SERVER['HTTP_HOST']) ? $_SERVER['HTTP_HOST'] : ($_SERVER['SERVER_NAME'].
            ($https && $_SERVER['SERVER_PORT'] === 443 ||
            $_SERVER['SERVER_PORT'] === 80 ? '' : ':'.$_SERVER['SERVER_PORT']))).
            substr($_SERVER['SCRIPT_NAME'],0, strrpos($_SERVER['SCRIPT_NAME'], '/'));
    }

    protected function get_user_id() {
        @session_start();
        return session_id();
    }

    protected function get_user_path() {
        if ($this->options['user_dirs']) {
            return $this->get_user_id().'/';
        }
        return '';
    }

    protected function get_upload_path($file_name = null, $version = null) {
        $file_name = $file_name ? $file_name : '';
        if (empty($version)) {
            $version_path = '';
        } else {
            $version_dir = @$this->options['image_versions'][$version]['upload_dir'];
            if ($version_dir) {
                return $version_dir.$this->get_user_path().$file_name;
            }
            $version_path = $version.'/';
        }
        return $this->options['upload_dir'].$this->get_user_path()
            .$version_path.$file_name;
    }

    protected function get_query_separator($url) {
        return strpos($url, '?') === false ? '?' : '&';
    }

    protected function get_download_url($file_name, $version = null, $direct = false) {
        if (!$direct && $this->options['download_via_php']) {
            $url = $this->options['script_url']
                .$this->get_query_separator($this->options['script_url'])
                .$this->get_singular_param_name()
                .'='.rawurlencode($file_name);
            if ($version) {
                $url .= '&version='.rawurlencode($version);
            }
            return $url.'&download=1';
        }
        if (empty($version)) {
            $version_path = '';
        } else {
            $version_url = @$this->options['image_versions'][$version]['upload_url'];
            if ($version_url) {
                return $version_url.$this->get_user_path().rawurlencode($file_name);
            }
            $version_path = rawurlencode($version).'/';
        }
        return $this->options['upload_url'].$this->get_user_path()
            .$version_path.rawurlencode($file_name);
    }

    protected function set_additional_file_properties($file) {
        $file->deleteUrl = $this->options['script_url']
            .$this->get_query_separator($this->options['script_url'])
            .$this->get_singular_param_name()
            .'='.rawurlencode($file->name);
        $file->deleteType = $this->options['delete_type'];
        if ($file->deleteType !== 'DELETE') {
            $file->deleteUrl .= '&_method=DELETE';
        }
        if ($this->options['access_control_allow_credentials']) {
            $file->deleteWithCredentials = true;
        }
    }

    // Fix for overflowing signed 32 bit integers,
    // works for sizes up to 2^32-1 bytes (4 GiB - 1):
    protected function fix_integer_overflow($size) {
        if ($size < 0) {
            $size += 2.0 * (PHP_INT_MAX + 1);
        }
        return $size;
    }

    protected function get_file_size($file_path, $clear_stat_cache = false) {
        if ($clear_stat_cache) {
            if (version_compare(PHP_VERSION, '5.3.0') >= 0) {
                clearstatcache(true, $file_path);
            } else {
                clearstatcache();
            }
        }
        return $this->fix_integer_overflow(filesize($file_path));
    }

    protected function is_valid_file_object($file_name) {
        $file_path = $this->get_upload_path($file_name);
        if (is_file($file_path) && $file_name[0] !== '.') {
            return true;
        }
        return false;
    }

    protected function get_file_object($file_name) {
        if ($this->is_valid_file_object($file_name)) {
            $file = new \stdClass();
            $file->name = $file_name;
            $file->size = $this->get_file_size(
                $this->get_upload_path($file_name)
            );
            $file->url = $this->get_download_url($file->name);
            foreach ($this->options['image_versions'] as $version => $options) {
                if (!empty($version)) {
                    if (is_file($this->get_upload_path($file_name, $version))) {
                        $file->{$version.'Url'} = $this->get_download_url(
                            $file->name,
                            $version
                        );
                    }
                }
            }
            $this->set_additional_file_properties($file);
            return $file;
        }
        return null;
    }

    protected function get_file_objects($iteration_method = 'get_file_object') {
        $upload_dir = $this->get_upload_path();
        if (!is_dir($upload_dir)) {
            return array();
        }
        return array_values(array_filter(array_map(
            array($this, $iteration_method),
            scandir($upload_dir)
        )));
    }

    protected function count_file_objects() {
        return count($this->get_file_objects('is_valid_file_object'));
    }

    protected function get_error_message($error) {
        return isset($this->error_messages[$error]) ?
            $this->error_messages[$error] : $error;
    }

    public function get_config_bytes($val) {
        $val = trim($val);
        $last = strtolower($val[strlen($val)-1]);
        $val = (int)$val;
        switch ($last) {
            case 'g':
                $val *= 1024;
            case 'm':
                $val *= 1024;
            case 'k':
                $val *= 1024;
        }
        return $this->fix_integer_overflow($val);
    }

    protected function validate($uploaded_file, $file, $error, $index) {
        if ($error) {
            $file->error = $this->get_error_message($error);
            return false;
        }
        $content_length = $this->fix_integer_overflow(
            (int)$this->get_server_var('CONTENT_LENGTH')
        );
        $post_max_size = $this->get_config_bytes(ini_get('post_max_size'));
        if ($post_max_size && ($content_length > $post_max_size)) {
            $file->error = $this->get_error_message('post_max_size');
            return false;
        }
        if (!preg_match($this->options['accept_file_types'], $file->name)) {
            $file->error = $this->get_error_message('accept_file_types');
            return false;
        }
        if ($uploaded_file && is_uploaded_file($uploaded_file)) {
            $file_size = $this->get_file_size($uploaded_file);
        } else {
            $file_size = $content_length;
        }
        if ($this->options['max_file_size'] && (
                $file_size > $this->options['max_file_size'] ||
                $file->size > $this->options['max_file_size'])
            ) {
            $file->error = $this->get_error_message('max_file_size');
            return false;
        }
        if ($this->options['min_file_size'] &&
            $file_size < $this->options['min_file_size']) {
            $file->error = $this->get_error_message('min_file_size');
            return false;
        }
        if (is_int($this->options['max_number_of_files']) &&
                ($this->count_file_objects() >= $this->options['max_number_of_files']) &&
                // Ignore additional chunks of existing files:
                !is_file($this->get_upload_path($file->name))) {
            $file->error = $this->get_error_message('max_number_of_files');
            return false;
        }
        $max_width = @$this->options['max_width'];
        $max_height = @$this->options['max_height'];
        $min_width = @$this->options['min_width'];
        $min_height = @$this->options['min_height'];
        if (($max_width || $max_height || $min_width || $min_height)
            && $this->is_valid_image_file($uploaded_file)) {
            list($img_width, $img_height) = $this->get_image_size($uploaded_file);
            // If we are auto rotating the image by default, do the checks on
            // the correct orientation
            if (
                @$this->options['image_versions']['']['auto_orient'] &&
                function_exists('exif_read_data') &&
                ($exif = @exif_read_data($uploaded_file)) &&
                (((int) @$exif['Orientation']) >= 5)
            ) {
                $tmp = $img_width;
                $img_width = $img_height;
                $img_height = $tmp;
                unset($tmp);
            }
        }
        if (!empty($img_width)) {
            if ($max_width && $img_width > $max_width) {
                $file->error = $this->get_error_message('max_width');
                return false;
            }
            if ($max_height && $img_height > $max_height) {
                $file->error = $this->get_error_message('max_height');
                return false;
            }
            if ($min_width && $img_width < $min_width) {
                $file->error = $this->get_error_message('min_width');
                return false;
            }
            if ($min_height && $img_height < $min_height) {
                $file->error = $this->get_error_message('min_height');
                return false;
            }
        }
        return true;
    }

    protected function upcount_name_callback($matches) {
        $index = isset($matches[1]) ? ((int)$matches[1]) + 1 : 1;
        $ext = isset($matches[2]) ? $matches[2] : '';
        return ' ('.$index.')'.$ext;
    }

    protected function upcount_name($name) {
        return preg_replace_callback(
            '/(?:(?: \(([\d]+)\))?(\.[^.]+))?$/',
            array($this, 'upcount_name_callback'),
            $name,
            1
        );
    }

    protected function get_unique_filename($file_path, $name, $size, $type, $error,
            $index, $content_range) {
        while(is_dir($this->get_upload_path($name))) {
            $name = $this->upcount_name($name);
        }
        // Keep an existing filename if this is part of a chunked upload:
        $uploaded_bytes = $this->fix_integer_overflow((int)$content_range[1]);
        while (is_file($this->get_upload_path($name))) {
            if ($uploaded_bytes === $this->get_file_size(
                    $this->get_upload_path($name))) {
                break;
            }
            $name = $this->upcount_name($name);
        }
        return $name;
    }

    protected function fix_file_extension($file_path, $name, $size, $type, $error,
            $index, $content_range) {
        // Add missing file extension for known image types:
        if (strpos($name, '.') === false &&
                preg_match('/^image\/(gif|jpe?g|png)/', $type, $matches)) {
            $name .= '.'.$matches[1];
        }
        if ($this->options['correct_image_extensions']) {
            switch ($this->imagetype($file_path)) {
                case self::IMAGETYPE_JPEG:
                    $extensions = array('jpg', 'jpeg');
                    break;
                case self::IMAGETYPE_PNG:
                    $extensions = array('png');
                    break;
                case self::IMAGETYPE_GIF:
                    $extensions = array('gif');
                    break;
            }
            // Adjust incorrect image file extensions:
            if (!empty($extensions)) {
                $parts = explode('.', $name);
                $extIndex = count($parts) - 1;
                $ext = strtolower(@$parts[$extIndex]);
                if (!in_array($ext, $extensions)) {
                    $parts[$extIndex] = $extensions[0];
                    $name = implode('.', $parts);
                }
            }
        }
        return $name;
    }

    protected function trim_file_name($file_path, $name, $size, $type, $error,
            $index, $content_range) {
        // Remove path information and dots around the filename, to prevent uploading
        // into different directories or replacing hidden system files.
        // Also remove control characters and spaces (\x00..\x20) around the filename:
        $name = trim($this->basename(stripslashes($name)), ".\x00..\x20");
        // Replace dots in filenames to avoid security issues with servers
        // that interpret multiple file extensions, e.g. "example.php.png":
        $replacement = $this->options['replace_dots_in_filenames'];
        if (!empty($replacement)) {
            $parts = explode('.', $name);
            if (count($parts) > 2) {
                $ext = array_pop($parts);
                $name = implode($replacement, $parts).'.'.$ext;
            }
        }
        // Use a timestamp for empty filenames:
        if (!$name) {
            $name = str_replace('.', '-', microtime(true));
        }
        return $name;
    }

    protected function get_file_name($file_path, $name, $size, $type, $error,
            $index, $content_range) {
        $name = $this->trim_file_name($file_path, $name, $size, $type, $error,
            $index, $content_range);
        return $this->get_unique_filename(
            $file_path,
            $this->fix_file_extension($file_path, $name, $size, $type, $error,
                $index, $content_range),
            $size,
            $type,
            $error,
            $index,
            $content_range
        );
    }

    protected function get_scaled_image_file_paths($file_name, $version) {
        $file_path = $this->get_upload_path($file_name);
        if (!empty($version)) {
            $version_dir = $this->get_upload_path(null, $version);
            if (!is_dir($version_dir)) {
                mkdir($version_dir, $this->options['mkdir_mode'], true);
            }
            $new_file_path = $version_dir.'/'.$file_name;
        } else {
            $new_file_path = $file_path;
        }
        return array($file_path, $new_file_path);
    }

    protected function gd_get_image_object($file_path, $func, $no_cache = false) {
        if (empty($this->image_objects[$file_path]) || $no_cache) {
            $this->gd_destroy_image_object($file_path);
            $this->image_objects[$file_path] = $func($file_path);
        }
        return $this->image_objects[$file_path];
    }

    protected function gd_set_image_object($file_path, $image) {
        $this->gd_destroy_image_object($file_path);
        $this->image_objects[$file_path] = $image;
    }

    protected function gd_destroy_image_object($file_path) {
        $image = (isset($this->image_objects[$file_path])) ? $this->image_objects[$file_path] : null ;
        return $image && imagedestroy($image);
    }

    protected function gd_imageflip($image, $mode) {
        if (function_exists('imageflip')) {
            return imageflip($image, $mode);
        }
        $new_width = $src_width = imagesx($image);
        $new_height = $src_height = imagesy($image);
        $new_img = imagecreatetruecolor($new_width, $new_height);
        $src_x = 0;
        $src_y = 0;
        switch ($mode) {
            case '1': // flip on the horizontal axis
                $src_y = $new_height - 1;
                $src_height = -$new_height;
                break;
            case '2': // flip on the vertical axis
                $src_x  = $new_width - 1;
                $src_width = -$new_width;
                break;
            case '3': // flip on both axes
                $src_y = $new_height - 1;
                $src_height = -$new_height;
                $src_x  = $new_width - 1;
                $src_width = -$new_width;
                break;
            default:
                return $image;
        }
        imagecopyresampled(
            $new_img,
            $image,
            0,
            0,
            $src_x,
            $src_y,
            $new_width,
            $new_height,
            $src_width,
            $src_height
        );
        return $new_img;
    }

    protected function gd_orient_image($file_path, $src_img) {
        if (!function_exists('exif_read_data')) {
            return false;
        }
        $exif = @exif_read_data($file_path);
        if ($exif === false) {
            return false;
        }
        $orientation = (int)@$exif['Orientation'];
        if ($orientation < 2 || $orientation > 8) {
            return false;
        }
        switch ($orientation) {
            case 2:
                $new_img = $this->gd_imageflip(
                    $src_img,
                    defined('IMG_FLIP_VERTICAL') ? IMG_FLIP_VERTICAL : 2
                );
                break;
            case 3:
                $new_img = imagerotate($src_img, 180, 0);
                break;
            case 4:
                $new_img = $this->gd_imageflip(
                    $src_img,
                    defined('IMG_FLIP_HORIZONTAL') ? IMG_FLIP_HORIZONTAL : 1
                );
                break;
            case 5:
                $tmp_img = $this->gd_imageflip(
                    $src_img,
                    defined('IMG_FLIP_HORIZONTAL') ? IMG_FLIP_HORIZONTAL : 1
                );
                $new_img = imagerotate($tmp_img, 270, 0);
                imagedestroy($tmp_img);
                break;
            case 6:
                $new_img = imagerotate($src_img, 270, 0);
                break;
            case 7:
                $tmp_img = $this->gd_imageflip(
                    $src_img,
                    defined('IMG_FLIP_VERTICAL') ? IMG_FLIP_VERTICAL : 2
                );
                $new_img = imagerotate($tmp_img, 270, 0);
                imagedestroy($tmp_img);
                break;
            case 8:
                $new_img = imagerotate($src_img, 90, 0);
                break;
            default:
                return false;
        }
        $this->gd_set_image_object($file_path, $new_img);
        return true;
    }

    protected function gd_create_scaled_image($file_name, $version, $options) {
        if (!function_exists('imagecreatetruecolor')) {
            error_log('Function not found: imagecreatetruecolor');
            return false;
        }
        list($file_path, $new_file_path) =
            $this->get_scaled_image_file_paths($file_name, $version);
        $type = strtolower(substr(strrchr($file_name, '.'), 1));
        switch ($type) {
            case 'jpg':
            case 'jpeg':
                $src_func = 'imagecreatefromjpeg';
                $write_func = 'imagejpeg';
                $image_quality = isset($options['jpeg_quality']) ?
                    $options['jpeg_quality'] : 75;
                break;
            case 'gif':
                $src_func = 'imagecreatefromgif';
                $write_func = 'imagegif';
                $image_quality = null;
                break;
            case 'png':
                $src_func = 'imagecreatefrompng';
                $write_func = 'imagepng';
                $image_quality = isset($options['png_quality']) ?
                    $options['png_quality'] : 9;
                break;
            default:
                return false;
        }
        $src_img = $this->gd_get_image_object(
            $file_path,
            $src_func,
            !empty($options['no_cache'])
        );
        $image_oriented = false;
        if (!empty($options['auto_orient']) && $this->gd_orient_image(
                $file_path,
                $src_img
            )) {
            $image_oriented = true;
            $src_img = $this->gd_get_image_object(
                $file_path,
                $src_func
            );
        }
        $max_width = $img_width = imagesx($src_img);
        $max_height = $img_height = imagesy($src_img);
        if (!empty($options['max_width'])) {
            $max_width = $options['max_width'];
        }
        if (!empty($options['max_height'])) {
            $max_height = $options['max_height'];
        }
        $scale = min(
            $max_width / $img_width,
            $max_height / $img_height
        );
        if ($scale >= 1) {
            if ($image_oriented) {
                return $write_func($src_img, $new_file_path, $image_quality);
            }
            if ($file_path !== $new_file_path) {
                return copy($file_path, $new_file_path);
            }
            return true;
        }
        if (empty($options['crop'])) {
            $new_width = $img_width * $scale;
            $new_height = $img_height * $scale;
            $dst_x = 0;
            $dst_y = 0;
            $new_img = imagecreatetruecolor($new_width, $new_height);
        } else {
            if (($img_width / $img_height) >= ($max_width / $max_height)) {
                $new_width = $img_width / ($img_height / $max_height);
                $new_height = $max_height;
            } else {
                $new_width = $max_width;
                $new_height = $img_height / ($img_width / $max_width);
            }
            $dst_x = 0 - ($new_width - $max_width) / 2;
            $dst_y = 0 - ($new_height - $max_height) / 2;
            $new_img = imagecreatetruecolor($max_width, $max_height);
        }
        // Handle transparency in GIF and PNG images:
        switch ($type) {
            case 'gif':
            case 'png':
                imagecolortransparent($new_img, imagecolorallocate($new_img, 0, 0, 0));
            case 'png':
                imagealphablending($new_img, false);
                imagesavealpha($new_img, true);
                break;
        }
        $success = imagecopyresampled(
            $new_img,
            $src_img,
            $dst_x,
            $dst_y,
            0,
            0,
            $new_width,
            $new_height,
            $img_width,
            $img_height
        ) && $write_func($new_img, $new_file_path, $image_quality);
        $this->gd_set_image_object($file_path, $new_img);
        return $success;
    }

    protected function imagick_get_image_object($file_path, $no_cache = false) {
        if (empty($this->image_objects[$file_path]) || $no_cache) {
            $this->imagick_destroy_image_object($file_path);
            $image = new \Imagick();
            if (!empty($this->options['imagick_resource_limits'])) {
                foreach ($this->options['imagick_resource_limits'] as $type => $limit) {
                    $image->setResourceLimit($type, $limit);
                }
            }
            $image->readImage($file_path);
            $this->image_objects[$file_path] = $image;
        }
        return $this->image_objects[$file_path];
    }

    protected function imagick_set_image_object($file_path, $image) {
        $this->imagick_destroy_image_object($file_path);
        $this->image_objects[$file_path] = $image;
    }

    protected function imagick_destroy_image_object($file_path) {
        $image = (isset($this->image_objects[$file_path])) ? $this->image_objects[$file_path] : null ;
        return $image && $image->destroy();
    }

    protected function imagick_orient_image($image) {
        $orientation = $image->getImageOrientation();
        $background = new \ImagickPixel('none');
        switch ($orientation) {
            case \imagick::ORIENTATION_TOPRIGHT: // 2
                $image->flopImage(); // horizontal flop around y-axis
                break;
            case \imagick::ORIENTATION_BOTTOMRIGHT: // 3
                $image->rotateImage($background, 180);
                break;
            case \imagick::ORIENTATION_BOTTOMLEFT: // 4
                $image->flipImage(); // vertical flip around x-axis
                break;
            case \imagick::ORIENTATION_LEFTTOP: // 5
                $image->flopImage(); // horizontal flop around y-axis
                $image->rotateImage($background, 270);
                break;
            case \imagick::ORIENTATION_RIGHTTOP: // 6
                $image->rotateImage($background, 90);
                break;
            case \imagick::ORIENTATION_RIGHTBOTTOM: // 7
                $image->flipImage(); // vertical flip around x-axis
                $image->rotateImage($background, 270);
                break;
            case \imagick::ORIENTATION_LEFTBOTTOM: // 8
                $image->rotateImage($background, 270);
                break;
            default:
                return false;
        }
        $image->setImageOrientation(\imagick::ORIENTATION_TOPLEFT); // 1
        return true;
    }

    protected function imagick_create_scaled_image($file_name, $version, $options) {
        list($file_path, $new_file_path) =
            $this->get_scaled_image_file_paths($file_name, $version);
        $image = $this->imagick_get_image_object(
            $file_path,
            !empty($options['crop']) || !empty($options['no_cache'])
        );
        if ($image->getImageFormat() === 'GIF') {
            // Handle animated GIFs:
            $images = $image->coalesceImages();
            foreach ($images as $frame) {
                $image = $frame;
                $this->imagick_set_image_object($file_name, $image);
                break;
            }
        }
        $image_oriented = false;
        if (!empty($options['auto_orient'])) {
            $image_oriented = $this->imagick_orient_image($image);
        } 
        
        $image_resize = false; 
        $new_width = $max_width = $img_width = $image->getImageWidth();
        $new_height = $max_height = $img_height = $image->getImageHeight(); 
          
        // use isset(). User might be setting max_width = 0 (auto in regular resizing). Value 0 would be considered empty when you use empty()
        if (isset($options['max_width'])) {
            $image_resize = true; 
            $new_width = $max_width = $options['max_width']; 
        }
        if (isset($options['max_height'])) {
            $image_resize = true;
            $new_height = $max_height = $options['max_height'];
        }
        
        $image_strip = (isset($options['strip']) ? $options['strip'] : false);
 
        if ( !$image_oriented && ($max_width >= $img_width) && ($max_height >= $img_height) && !$image_strip && empty($options["jpeg_quality"]) ) {        
            if ($file_path !== $new_file_path) {
                return copy($file_path, $new_file_path);
            }
            return true;
        }
        $crop = (isset($options['crop']) ? $options['crop'] : false);
        
        if ($crop) {
            $x = 0;
            $y = 0;
            if (($img_width / $img_height) >= ($max_width / $max_height)) {
                $new_width = 0; // Enables proportional scaling based on max_height
                $x = ($img_width / ($img_height / $max_height) - $max_width) / 2;
            } else {
                $new_height = 0; // Enables proportional scaling based on max_width
                $y = ($img_height / ($img_width / $max_width) - $max_height) / 2;
            }
        }
        $success = $image->resizeImage(
            $new_width,
            $new_height,
            isset($options['filter']) ? $options['filter'] : \imagick::FILTER_LANCZOS,
            isset($options['blur']) ? $options['blur'] : 1,
            $new_width && $new_height // fit image into constraints if not to be cropped
        );
        if ($success && $crop) {
            $success = $image->cropImage(
                $max_width,
                $max_height,
                $x,
                $y
            );
            if ($success) {
                $success = $image->setImagePage($max_width, $max_height, 0, 0);
            }
        }
        $type = strtolower(substr(strrchr($file_name, '.'), 1));
        switch ($type) {
            case 'jpg':
            case 'jpeg':
                if (!empty($options['jpeg_quality'])) {
                    $image->setImageCompression(\imagick::COMPRESSION_JPEG);
                    $image->setImageCompressionQuality($options['jpeg_quality']);
                }
                break;
        }
        if ( $image_strip ) {
            $image->stripImage();
        }
        return $success && $image->writeImage($new_file_path);
    }

    protected function imagemagick_create_scaled_image($file_name, $version, $options) {
        list($file_path, $new_file_path) =
            $this->get_scaled_image_file_paths($file_name, $version);
        $resize = @$options['max_width']
            .(empty($options['max_height']) ? '' : 'X'.$options['max_height']);
        if (!$resize && empty($options['auto_orient'])) {
            if ($file_path !== $new_file_path) {
                return copy($file_path, $new_file_path);
            }
            return true;
        }
        $cmd = $this->options['convert_bin'];
        if (!empty($this->options['convert_params'])) {
            $cmd .= ' '.$this->options['convert_params'];
        }
        $cmd .= ' '.escapeshellarg($file_path);
        if (!empty($options['auto_orient'])) {
            $cmd .= ' -auto-orient';
        }
        if ($resize) {
            // Handle animated GIFs:
            $cmd .= ' -coalesce';
            if (empty($options['crop'])) {
                $cmd .= ' -resize '.escapeshellarg($resize.'>');
            } else {
                $cmd .= ' -resize '.escapeshellarg($resize.'^');
                $cmd .= ' -gravity center';
                $cmd .= ' -crop '.escapeshellarg($resize.'+0+0');
            }
            // Make sure the page dimensions are correct (fixes offsets of animated GIFs):
            $cmd .= ' +repage';
        }
        if (!empty($options['convert_params'])) {
            $cmd .= ' '.$options['convert_params'];
        }
        $cmd .= ' '.escapeshellarg($new_file_path);
        exec($cmd, $output, $error);
        if ($error) {
            error_log(implode('\n', $output));
            return false;
        }
        return true;
    }

    protected function get_image_size($file_path) {
        if ($this->options['image_library']) {
            if (extension_loaded('imagick')) {
                $image = new \Imagick();
                try {
                    if (@$image->pingImage($file_path)) {
                        $dimensions = array($image->getImageWidth(), $image->getImageHeight());
                        $image->destroy();
                        return $dimensions;
                    }
                    return false;
                } catch (\Exception $e) {
                    error_log($e->getMessage());
                }
            }
            if ($this->options['image_library'] === 2) {
                $cmd = $this->options['identify_bin'];
                $cmd .= ' -ping '.escapeshellarg($file_path);
                exec($cmd, $output, $error);
                if (!$error && !empty($output)) {
                    // image.jpg JPEG 1920x1080 1920x1080+0+0 8-bit sRGB 465KB 0.000u 0:00.000
                    $infos = preg_split('/\s+/', substr($output[0], strlen($file_path)));
                    $dimensions = preg_split('/x/', $infos[2]);
                    return $dimensions;
                }
                return false;
            }
        }
        if (!function_exists('getimagesize')) {
            error_log('Function not found: getimagesize');
            return false;
        }
        return @getimagesize($file_path);
    }

    protected function create_scaled_image($file_name, $version, $options) {
        try {
            if ($this->options['image_library'] === 2) {
                return $this->imagemagick_create_scaled_image($file_name, $version, $options);
            }
            if ($this->options['image_library'] && extension_loaded('imagick')) {
                return $this->imagick_create_scaled_image($file_name, $version, $options);
            }
            return $this->gd_create_scaled_image($file_name, $version, $options);
        } catch (\Exception $e) {
            error_log($e->getMessage());
            return false;
        }
    }

    protected function destroy_image_object($file_path) {
        if ($this->options['image_library'] && extension_loaded('imagick')) {
            return $this->imagick_destroy_image_object($file_path);
        }
    }

    protected function imagetype($file_path) {
        $fp = fopen($file_path, 'r');
        $data = fread($fp, 4);
        fclose($fp);
        // GIF: 47 49 46 38
        if ($data === 'GIF8') {
            return self::IMAGETYPE_GIF;
        }
        // JPG: FF D8 FF
        if (bin2hex(substr($data, 0, 3)) === 'ffd8ff') {
            return self::IMAGETYPE_JPEG;
        }
        // PNG: 89 50 4E 47
        if (bin2hex(@$data[0]).substr($data, 1, 4) === '89PNG') {
            return self::IMAGETYPE_PNG;
        }
        return false;
    }

    protected function is_valid_image_file($file_path) {
        if (!preg_match('/\.(gif|jpe?g|png)$/i', $file_path)) {
            return false;
        }
        return !!$this->imagetype($file_path);
    }

    protected function handle_image_file($file_path, $file) {
        $failed_versions = array();
        foreach ($this->options['image_versions'] as $version => $options) {
            if ($this->create_scaled_image($file->name, $version, $options)) {
                if (!empty($version)) {
                    $file->{$version.'Url'} = $this->get_download_url(
                        $file->name,
                        $version
                    );
                } else {
                    $file->size = $this->get_file_size($file_path, true);
                }
            } else {
                $failed_versions[] = $version ? $version : 'original';
            }
        }
        if (count($failed_versions)) {
            $file->error = $this->get_error_message('image_resize')
                    .' ('.implode($failed_versions, ', ').')';
        }
        // Free memory:
        $this->destroy_image_object($file_path);
    }

    protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
            $index = null, $content_range = null) {
        $file = new \stdClass();
        $file->name = $this->get_file_name($uploaded_file, $name, $size, $type, $error, $index, $content_range);
        $file->size = $this->fix_integer_overflow((int)$size);
        $file->type = $type;
        if ($this->validate($uploaded_file, $file, $error, $index)) {
            $this->handle_form_data($file, $index);
            $upload_dir = $this->get_upload_path();
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir, $this->options['mkdir_mode'], true);
            }
            $file_path = $this->get_upload_path($file->name);
            $append_file = $content_range && is_file($file_path) &&
                $file->size > $this->get_file_size($file_path);
            if ($uploaded_file && is_uploaded_file($uploaded_file)) {
                // multipart/formdata uploads (POST method uploads)
                if ($append_file) {
                    file_put_contents(
                        $file_path,
                        fopen($uploaded_file, 'r'),
                        FILE_APPEND
                    );
                } else {
                    move_uploaded_file($uploaded_file, $file_path);
                }
            } else {
                // Non-multipart uploads (PUT method support)
                file_put_contents(
                    $file_path,
                    fopen($this->options['input_stream'], 'r'),
                    $append_file ? FILE_APPEND : 0
                );
            }
            $file_size = $this->get_file_size($file_path, $append_file);
            if ($file_size === $file->size) {
                $file->url = $this->get_download_url($file->name);
                if ($this->is_valid_image_file($file_path)) {
                    $this->handle_image_file($file_path, $file);
                }
            } else {
                $file->size = $file_size;
                if (!$content_range && $this->options['discard_aborted_uploads']) {
                    unlink($file_path);
                    $file->error = $this->get_error_message('abort');
                }
            }
            $this->set_additional_file_properties($file);
        }
        return $file;
    }

    protected function readfile($file_path) {
        $file_size = $this->get_file_size($file_path);
        $chunk_size = $this->options['readfile_chunk_size'];
        if ($chunk_size && $file_size > $chunk_size) {
            $handle = fopen($file_path, 'rb');
            while (!feof($handle)) {
                echo fread($handle, $chunk_size);
                @ob_flush();
                @flush();
            }
            fclose($handle);
            return $file_size;
        }
        return readfile($file_path);
    }

    protected function body($str) {
        echo $str;
    }

    protected function header($str) {
        header($str);
    }

    protected function get_upload_data($id) {
        return @$_FILES[$id];
    }

    protected function get_post_param($id) {
        return @$_POST[$id];
    }

    protected function get_query_param($id) {
        return @$_GET[$id];
    }

    protected function get_server_var($id) {
        return @$_SERVER[$id];
    }

    protected function handle_form_data($file, $index) {
        // Handle form data, e.g. $_POST['description'][$index]
    }

    protected function get_version_param() {
        return $this->basename(stripslashes($this->get_query_param('version')));
    }

    protected function get_singular_param_name() {
        return substr($this->options['param_name'], 0, -1);
    }

    protected function get_file_name_param() {
        $name = $this->get_singular_param_name();
        return $this->basename(stripslashes($this->get_query_param($name)));
    }

    protected function get_file_names_params() {
        $params = $this->get_query_param($this->options['param_name']);
        if (!$params) {
            return null;
        }
        foreach ($params as $key => $value) {
            $params[$key] = $this->basename(stripslashes($value));
        }
        return $params;
    }

    protected function get_file_type($file_path) {
        switch (strtolower(pathinfo($file_path, PATHINFO_EXTENSION))) {
            case 'jpeg':
            case 'jpg':
                return 'image/jpeg';
            case 'png':
                return 'image/png';
            case 'gif':
                return 'image/gif';
            default:
                return '';
        }
    }

    protected function download() {
        switch ($this->options['download_via_php']) {
            case 1:
                $redirect_header = null;
                break;
            case 2:
                $redirect_header = 'X-Sendfile';
                break;
            case 3:
                $redirect_header = 'X-Accel-Redirect';
                break;
            default:
                return $this->header('HTTP/1.1 403 Forbidden');
        }
        $file_name = $this->get_file_name_param();
        if (!$this->is_valid_file_object($file_name)) {
            return $this->header('HTTP/1.1 404 Not Found');
        }
        if ($redirect_header) {
            return $this->header(
                $redirect_header.': '.$this->get_download_url(
                    $file_name,
                    $this->get_version_param(),
                    true
                )
            );
        }
        $file_path = $this->get_upload_path($file_name, $this->get_version_param());
        // Prevent browsers from MIME-sniffing the content-type:
        $this->header('X-Content-Type-Options: nosniff');
        if (!preg_match($this->options['inline_file_types'], $file_name)) {
            $this->header('Content-Type: application/octet-stream');
            $this->header('Content-Disposition: attachment; filename="'.$file_name.'"');
        } else {
            $this->header('Content-Type: '.$this->get_file_type($file_path));
            $this->header('Content-Disposition: inline; filename="'.$file_name.'"');
        }
        $this->header('Content-Length: '.$this->get_file_size($file_path));
        $this->header('Last-Modified: '.gmdate('D, d M Y H:i:s T', filemtime($file_path)));
        $this->readfile($file_path);
    }

    protected function send_content_type_header() {
        $this->header('Vary: Accept');
        if (strpos($this->get_server_var('HTTP_ACCEPT'), 'application/json') !== false) {
            $this->header('Content-type: application/json');
        } else {
            $this->header('Content-type: text/plain');
        }
    }

    protected function send_access_control_headers() {
        $this->header('Access-Control-Allow-Origin: '.$this->options['access_control_allow_origin']);
        $this->header('Access-Control-Allow-Credentials: '
            .($this->options['access_control_allow_credentials'] ? 'true' : 'false'));
        $this->header('Access-Control-Allow-Methods: '
            .implode(', ', $this->options['access_control_allow_methods']));
        $this->header('Access-Control-Allow-Headers: '
            .implode(', ', $this->options['access_control_allow_headers']));
    }

    public function generate_response($content, $print_response = true) {
        $this->response = $content;
        if ($print_response) {
            $json = json_encode($content);
            $redirect = stripslashes($this->get_post_param('redirect'));
            if ($redirect && preg_match($this->options['redirect_allow_target'], $redirect)) {
                $this->header('Location: '.sprintf($redirect, rawurlencode($json)));
                return;
            }
            $this->head();
            if ($this->get_server_var('HTTP_CONTENT_RANGE')) {
                $files = isset($content[$this->options['param_name']]) ?
                    $content[$this->options['param_name']] : null;
                if ($files && is_array($files) && is_object($files[0]) && $files[0]->size) {
                    $this->header('Range: 0-'.(
                        $this->fix_integer_overflow((int)$files[0]->size) - 1
                    ));
                }
            }
            $this->body($json);
        }
        return $content;
    }

    public function get_response () {
        return $this->response;
    }

    public function head() {
        $this->header('Pragma: no-cache');
        $this->header('Cache-Control: no-store, no-cache, must-revalidate');
        $this->header('Content-Disposition: inline; filename="files.json"');
        // Prevent Internet Explorer from MIME-sniffing the content-type:
        $this->header('X-Content-Type-Options: nosniff');
        if ($this->options['access_control_allow_origin']) {
            $this->send_access_control_headers();
        }
        $this->send_content_type_header();
    }

    public function get($print_response = true) {
        if ($print_response && $this->get_query_param('download')) {
            return $this->download();
        }
        $file_name = $this->get_file_name_param();
        if ($file_name) {
            $response = array(
                $this->get_singular_param_name() => $this->get_file_object($file_name)
            );
        } else {
            $response = array(
                $this->options['param_name'] => $this->get_file_objects()
            );
        }
        return $this->generate_response($response, $print_response);
    }

    public function post($print_response = true) {
        if ($this->get_query_param('_method') === 'DELETE') {
            return $this->delete($print_response);
        }
        $upload = $this->get_upload_data($this->options['param_name']);
        // Parse the Content-Disposition header, if available:
        $content_disposition_header = $this->get_server_var('HTTP_CONTENT_DISPOSITION');
        $file_name = $content_disposition_header ?
            rawurldecode(preg_replace(
                '/(^[^"]+")|("$)/',
                '',
                $content_disposition_header
            )) : null;
        // Parse the Content-Range header, which has the following form:
        // Content-Range: bytes 0-524287/2000000
        $content_range_header = $this->get_server_var('HTTP_CONTENT_RANGE');
        $content_range = $content_range_header ?
            preg_split('/[^0-9]+/', $content_range_header) : null;
        $size =  $content_range ? $content_range[3] : null;
        $files = array();
        if ($upload) {
            if (is_array($upload['tmp_name'])) {
                // param_name is an array identifier like "files[]",
                // $upload is a multi-dimensional array:
                foreach ($upload['tmp_name'] as $index => $value) {
                    $files[] = $this->handle_file_upload(
                        $upload['tmp_name'][$index],
                        $file_name ? $file_name : $upload['name'][$index],
                        $size ? $size : $upload['size'][$index],
                        $upload['type'][$index],
                        $upload['error'][$index],
                        $index,
                        $content_range
                    );
                }
            } else {
                // param_name is a single object identifier like "file",
                // $upload is a one-dimensional array:
                $files[] = $this->handle_file_upload(
                    isset($upload['tmp_name']) ? $upload['tmp_name'] : null,
                    $file_name ? $file_name : (isset($upload['name']) ?
                            $upload['name'] : null),
                    $size ? $size : (isset($upload['size']) ?
                            $upload['size'] : $this->get_server_var('CONTENT_LENGTH')),
                    isset($upload['type']) ?
                            $upload['type'] : $this->get_server_var('CONTENT_TYPE'),
                    isset($upload['error']) ? $upload['error'] : null,
                    null,
                    $content_range
                );
            }
        }
        $response = array($this->options['param_name'] => $files);
        return $this->generate_response($response, $print_response);
    }

    public function delete($print_response = true) {
        $file_names = $this->get_file_names_params();
        if (empty($file_names)) {
            $file_names = array($this->get_file_name_param());
        }
        $response = array();
        foreach ($file_names as $file_name) {
            $file_path = $this->get_upload_path($file_name);
            $success = is_file($file_path) && $file_name[0] !== '.' && unlink($file_path);
            if ($success) {
                foreach ($this->options['image_versions'] as $version => $options) {
                    if (!empty($version)) {
                        $file = $this->get_upload_path($file_name, $version);
                        if (is_file($file)) {
                            unlink($file);
                        }
                    }
                }
            }
            $response[$file_name] = $success;
        }
        return $this->generate_response($response, $print_response);
    }

    protected function basename($filepath, $suffix = null) {
        $splited = preg_split('/\//', rtrim ($filepath, '/ '));
        return substr(basename('X'.$splited[count($splited)-1], $suffix), 1);
    }
}
 

 

Arquivo Main.js - Localizado na pasta js/

Spoiler

/*
 * jQuery File Upload Plugin JS Example
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */

/* global $, window */

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
   // $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
       // url: 'img/'
   // });

    $('#fileupload').fileupload({
     url: 'server/php/'
        }).on('fileuploadsubmit', function (e, data) {
    data.formData = data.context.find(':input').serializeArray();
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

    if (window.location.hostname === 'blueimp.github.io') {
        // Demo settings:
        $('#fileupload').fileupload('option', {
            url: '//jquery-file-upload.appspot.com/',
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            maxFileSize: 999000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
        });
        // Upload server status check for browsers with CORS support:
        if ($.support.cors) {
            $.ajax({
                url: '//jquery-file-upload.appspot.com/',
                type: 'HEAD'
            }).fail(function () {
                $('<div class="alert alert-danger"/>')
                    .text('Upload server currently unavailable - ' +
                            new Date())
                    .appendTo('#fileupload');
            });
        }
    } else {
        // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });
    }

});
 

 

estrutura_tabela_files_plugin_fileupload.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por yeahboy
      Quero que ao clicar em "Enviar consulta", execute um script .php que envie os dados no formulário para um .txt
      Eu mandaria pra db, mas ainda não aprendi, minha ideia com isso é apenas aprendizado em php, com testes locais.

    • Por MAKAVELIQUE
      Pessoal, imaginem a seguinte situação: o usuário A clica no botão enviar no mesmo instante que o usuário B, caso a ação do sql seja um comando update no mesmo campo, id=7 por exemplo e isso acontecer exatamente no mesmo instante, ocorre perca de dados? 
      <?php $update = "UPDATE br_gang SET i='$i', data= NOW() WHERE id='$id'"; $query = mysqli_query($update, $conn) or die (mysqli_error($conn)); if($update==true){ echo "<script>alert ('DADOS SALVOS COM SUCESSO, BOA SORTE!');</script>"; } ?> Se isso acontecer e ocorrer perca de dados, qual o procedimento possível para resolver o problema?
    • Por Dionizio
      Galera, boa  noite!
       
      Estou iniciando mexer com a linguagem php. e estou com o seguinte problema, não consigo exibe um valor do banco em minha pagina.
      por exemplo queria pegar o valor do nome da minha tabela e não consigo. teria como alguém me ajudar
       
       <div class="st-title"> Dionizio</div>
       
      Minha tabela
       
      DROP TABLE IF EXISTS `clientes`;
      /*!40101 SET @saved_cs_client     = @@character_set_client */;
      /*!40101 SET character_set_client = utf8 */;
      CREATE TABLE `clientes` (
        `id` int(11) NOT NULL,
        `id_user` int(11) DEFAULT NULL,
        `nome` varchar(100) NOT NULL,
        `agenda` varchar(15) DEFAULT NULL,
        `agenda_cor` varchar(10) NOT NULL DEFAULT '#000000',
        `data` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
        `End` varchar(100) DEFAULT NULL,
        `Num` varchar(5) DEFAULT NULL,
        `Bairro` varchar(50) DEFAULT NULL,
        `Cidade` varchar(50) DEFAULT NULL,
        `UF` varchar(2) DEFAULT NULL,
        `Cep` varchar(9) DEFAULT NULL,
        `Fone` varchar(255) DEFAULT NULL,
        `Email` varchar(50) DEFAULT NULL,
        `Rg` varchar(22) DEFAULT NULL,
        `Cpf` varchar(14) DEFAULT NULL,
        `senha` varchar(32) DEFAULT NULL,
        `usuario` varchar(200) DEFAULT NULL,
       `Aniversario` timestamp NULL DEFAULT NULL,
        `Sexo` enum('F','M','T') NOT NULL,
        `Indicacao` varchar(100) DEFAULT NULL,
        `Obs` varchar(50) DEFAULT NULL
      ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
      /*!40101 SET character_set_client = @saved_cs_client */;
       
      Esse é meu arquivo painel.php
       
      <?php
      session_start();
      include('conexao.php');
      include('verifica_login.php');

      $query = "SELECT * FROM clientes";
      $result = mysqli_query($conexao, $query);
      $row = mysqli_num_rows($result);

      ?>

      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          
          <!-- Basic -->
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Seja bem-vindo!</title>
          <meta name="description" content="">
          <meta name="keywords" content="">
          
          <!-- Mobile Specific Metas -->
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
          
          <!-- Load Fonts -->
          <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic" rel="stylesheet">
          
          <!-- CSS -->
          <link rel="stylesheet" href="css/basic.css" />
          <link rel="stylesheet" href="css/layout.css" />
          <link rel="stylesheet" href="css/font-awesome.min.css">    
          <link rel="stylesheet" href="css/ionicons.min.css" />
          <link rel="stylesheet" href="css/owl.carousel.css" />
          <link rel="stylesheet" href="css/magnific-popup.css" />
          <link rel="stylesheet" href="css/animate.css" />
          
          <!--[if lt IE 9]>
          <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
          
          <!-- Favicon -->
          <link rel="shortcut icon" href="img/painel/favicon.ico">
          
      </head>
      <body>
          
          
          <!-- Page -->
          <div class="page" id="home-section">
              <!-- Preloader -->
              <div class="preloader">
                  <div class="centrize full-width">
                      <div class="vertical-center">
                          <div class="spinner">
                              <div class="double-bounce1"></div>
                              <div class="double-bounce2"></div>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- Started Background -->
              <div class="started-bg">
                  <div class="slide" style="background-image: url(img/painel/slide-bg.jpg);"></div>
              </div>
              <!-- Header -->
              <header>
                  <div class="top-menu">
                      <ul>
                          <li class="active">
                              <a class="btn_animated" href="#home-section"><span class="circle">Home</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#about-section"><span class="circle">About</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#skills-section"><span class="circle">Skills</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#experience-section"><span class="circle">Experience</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#service-section"><span class="circle">Services</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#education-section"><span class="circle">Education</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#works-section"><span class="circle">Portfolio</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#clients-section"><span class="circle">Clients</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#pricing-section"><span class="circle">Pricing</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#blog-section"><span class="circle">Blog</span></a>
                          </li>
                          <li>
                              <a class="btn_animated" href="#contact-section"><span class="circle">Contact Me</span></a>
                          </li>
                      </ul>
                      <a href="#" class="menu-btn"><span></span></a>
                  </div>
              </header>
              
              <!-- Container -->
              <div class="container">
                  <!-- Started -->
                  <div class="section started">
                      <div class="st-box">
                          <div class="st-bts">
                              <a href="mailto:smorgan@domain.com" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-plus"></i></span>
                              </a>
                          </div>
                          <div class="st-image"><img src="img/painel/man.png" alt="" /></div>
       
       
       
                         <div class="st-title"> Dionizio</div>
       

                          <div class="st-subtitle">Menbro desde: 15/02/2018</div>
                          <div class="st-soc">
                              <a target="blank" href="https://www.facebook.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-facebook"></i></span>
                              </a>
                              <a target="blank" href="https://github.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-github"></i></span>
                              </a>
                              <a target="blank" href="https://twitter.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-twitter"></i></span>
                              </a>
                              <a href="skype:smorgan" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-skype"></i></span>
                              </a>
                              <a target="blank" href="https://plus.google.com/" class="btn_animated">
                                  <span class="circle"><i class="icon ion ion-social-googleplus"></i></span>
                              </a>
                          </div>
                      </div>
                  </div>
                  <!-- Wrapper -->
                  <div class="wrapper">
                      <!-- Section About -->
                      <div class="section about" id="about-section">
                          <div class="content-box">
                              <div class="row">
                              
                                  
                                  <div class="col col-m-12 col-t-7 col-d-7">
                                      <div class="text-box">
                                          <p><strong> Olá, Seja bem-vindo! </strong></p>
                                          <p> A nossa barbearia. A gente sabe da correria do seu dia-a-dia e que o seu tempo é precioso. 
                                          É por isso que estamos sempre a postos te esperando para o nosso ritual, aquele momento para se desligar de 
                                          tudo e pensar apenas em você. Essa é a #BarbeariaOLenhador , atualizar o seu estilo e romper qualquer padrão. 
                                          Nossos barbeiros já estão esperando para te atender em uma das nossas sedes. 
                                          Ligue e marque um horário: - Olinda - 1234.5678, das 09 às 21h. - Recife - 3214.9874, das 09 às 19h.
                                          </p>                                    
                                      </div>
                                      </div>
                                      
                                      <div class="col col-m-12 col-t-5 col-d-5">
                                      <div class="info-list">
                                          <ul>
                                              <li><strong><span>Nome:</span></strong> <?php echo $_SESSION['usuario'];?></li>
                                              <li><strong><span>Endereço:</span></strong> Freelancer </li>
                                              <li><strong><span>Celular:</span></strong> <a href="tel:12562548456">+1 256 254 84 56</a></li>                                        
                                              <li><strong><span>E-mail:</span></strong> <a href="mailto:smorgan@domain.com">miciasdionizio@hotmail.com</a></li>                                        
                                          </ul>
                                      </div>
                                      <div class="bts">
                                      <!--    <a href="#" class="btn btn_animated"><span class="circle">Download CV</span></a>
                                          <a href="#" class="btn extra contact-btn btn_animated"><span class="circle">Contact Me</span></a> -->
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Section Skills -->
                      <div class="section skills" id="skills-section">
                          <div class="title">Nossos Profissionais:</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-gear-b"></i></div>
                                          <div class="name">Professional</div>
                                      </div>
                                      <div class="skills">
                                          <ul>
                                              <li> 
                                                  <div class="name">UI/UX Design</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:88%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Web Application</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:90%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li>
                                                  <div class="name">Mobile Application</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:84%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Writing</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:60%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Photography</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:72%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-person"></i></div>
                                          <div class="name">Personal</div>
                                      </div>
                                      <div class="skills">
                                          <ul>
                                              <li> 
                                                  <div class="name">Communication</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:78%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Team Work</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:90%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li>
                                                  <div class="name">Leadership</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:60%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Creativity</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:84%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                              <li> 
                                                  <div class="name">Language</div>
                                                  <div class="progress">
                                                      <div class="percentage" style="width:72%;">
                                                          <span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
                                                      </div>
                                                  </div>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Experience -->
                      <div class="section experience" id="experience-section">
                          <div class="title">
                              Fidelidade:
                              <span class="circle"><i class="fa fa-chevron-down"></i></span>
                          </div>
                          <div class="cd-timeline">
                              <div class="cd-timeline-block animated">
                                  <div class="cd-timeline-point">
                                      <i class="icon ion ion-ios-checkmark-empty"></i>
                                  </div>
                                  <div class="cd-timeline-content">
                                      <div class="content-box">
                                          <div class="date">15/02/2019</div>
                                          <div class="name">01</div>
                                          <div class="category">Barbearia O Lenhador</div>
                                          <p>    Lorem ipsum dolor sit amet, in quodsi vulputate pro. Ius illum vocent mediocritatem an, cule dicta iriure at. Ubique 
                                              </p>
                                      </div>
                                  </div>
                              </div>
                              <div class="cd-timeline-block animated">
                                  <div class="cd-timeline-point">
                                      <i class="icon ion ion-ios-checkmark-empty"></i>
                                  </div>
                                  <div class="cd-timeline-content">
                                      <div class="content-box">
                                          <div class="date">15/07/2019</div>
                                          <div class="name">02</div>
                                          <div class="category">Barbearia O Lenhador</div>
                                          <p>    Ubique maluisset vel te, his dico vituperata ut. Pro ei phaedrum maluisset. Ex audire suavitate has, ei quodsi 
                                              </p>
                                      </div>
                                  </div>
                              </div>
                              <div class="cd-timeline-block animated">
                                  <div class="cd-timeline-point">
                                      <i class="icon ion ion-ios-checkmark-empty"></i>
                                  </div>
                                  <div class="cd-timeline-content">
                                      <div class="content-box">
                                          <div class="date">15/06/2018</div>
                                          <div class="name">03</div>
                                          <div class="category">Barbearia O Lenhador</div>
                                          <p>    Ubique maluisset vel te, his dico vituperata ut. Pro ei phaedrum maluisset. Ex audire suavitate has, ei quodsi 
                                              
                                          </p>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Service -->
                      <div class="section service" id="service-section">
                          <div class="title">Nossos Serviços:</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-android-color-palette"></i></div>
                                          <div class="name">UI/UX Design</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
                                          sit amet, consectetur adipiscing elit.
                                      </p>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-social-chrome"></i></div>
                                          <div class="name">Web Application</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
                                          sit amet, consectetur adipiscing elit.
                                      </p>
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-social-android"></i></div>
                                          <div class="name">Android Application</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies.
                                      </p>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-social-apple"></i></div>
                                          <div class="name">IOS Application</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
                                          sit amet, consectetur adipiscing elit.
                                      </p>
                                  </div>
                              </div>
                          </div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-android-create"></i></div>
                                          <div class="name">Writing</div>
                                      </div>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies.
                                      </p>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="i_title">
                                          <div class="icon"><i class="icon ion ion-camera"></i></div>
                                          <div class="name">Photography</div>
                                      </div>
                                      <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                          
                                      </p>
                                  </div>
                              </div>
                          </div>
                      </div>
                                  
                      
                      
                      <!-- Portfolio -->
                      <div class="section works" id="works-section">
                          <div class="title">Portfolio</div>
                          <div class="filter-menu">
                              <div class="filters">
                                  <div class="btn-group">
                                      <div class="f_btn btn_animated active">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="box-item" />All</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-mockup" />Mockups</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-graphic" />Graphics</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-icons" />Icons</label>
                                          </div>
                                      </div>
                                      <div class="f_btn btn_animated">
                                          <div class="circle">
                                              <label><input type="radio" name="fl_radio" value="f-ui" />UI Kits</label>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="row box-items">
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-mockup animated">
                                  <div class="image">
                                      <a href="#popup-1" class="has-popup"><img src="img/painel/work1.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Mockups</div>
                                      <a href="#popup-1" class="name has-popup">Realistic Business Cards MockUp</a>
                                      <p>
                                          Here’s a new b-cards mock-up with several business cards...
                                      </p>
                                  </div>
                                  <div id="popup-1" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/work1.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Mockups</div>
                                              <h4>Realistic Business Cards MockUp</h4>
                                              <p>
                                                  Here’s a new b-cards mock-up with several business cards scattered across the scene. The PSD file allows you 
                                                  to easily. Here’s a new b-cards mock-up with several business cards scattered across the scene.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-graphic animated">
                                  <div class="image">
                                      <a href="#popup-2" class="has-popup"><img src="img/painel/work3.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Graphic</div>
                                      <a href="#popup-2" class="name has-popup">The Mountainbiker Freebie</a>
                                      <p>
                                          The freebie of the day is a logo design kit with an original theme...
                                      </p>
                                  </div>
                                  <div id="popup-2" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work3.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Graphic</div>
                                              <h4>The Mountainbiker Freebie</h4>
                                              <p>
                                                  The freebie of the day is a logo design kit with an original theme that will help you create 
                                                  stunning mountain bike related logos in just minutes.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-mockup animated">
                                  <div class="image">
                                      <a href="#popup-3" class="has-popup"><img src="img/painel/work2.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Mockups</div>
                                      <a href="#popup-3" class="name has-popup">Notebook MockUp PSD</a>
                                      <p>
                                          Today we’re happy to share with you the mockup of a classic...
                                      </p>
                                  </div>
                                  <div id="popup-3" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work2.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Mockups</div>
                                              <h4>Notebook MockUp PSD</h4>
                                              <p>
                                                  Today we’re happy to share with you the mockup of a classic notebook that will help you showcase your 
                                                  drawings. Today we’re happy to share with you the mockup of a classic notebook that will help.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-icons animated">
                                  <div class="image">
                                      <a href="#popup-4" class="has-popup"><img src="img/painel/work4.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">Icons</div>
                                      <a href="#popup-4" class="name has-popup">Capitalist Icons</a>
                                      <p>
                                          Today we have for you a set of 20 icons available in 2 styles: colored...
                                      </p>
                                  </div>
                                  <div id="popup-4" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work4.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">Icons</div>
                                              <h4>Capitalist Icons</h4>
                                              <p>
                                                  Today we have for you a set of 20 icons available in 2 styles: colored flat and line version, 
                                                  designed on a 128px grid. These polished icons come in multiple formats so you can easily include 
                                                  them in your projects.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-ui animated">
                                  <div class="image">
                                      <a href="#popup-5" class="has-popup"><img src="img/painel/work5.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">UI Kits</div>
                                      <a href="#popup-5" class="name has-popup">Mapogo UI Kit</a>
                                      <p>
                                          Mapogo is an expertly crafted UI kit perfect for iOS designers...
                                      </p>
                                  </div>
                                  <div id="popup-5" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work5.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">UI Kits</div>
                                              <h4>Mapogo UI Kit</h4>
                                              <p>
                                                  Mapogo is an expertly crafted UI kit perfect for iOS designers and developers. The free sample 
                                                  includes 10 screens (750×1334 px) that can be easily customized in Photoshop
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-4 box-item f-ui animated">
                                  <div class="image">
                                      <a href="#popup-6" class="has-popup"><img src="img/painel/work6.jpg" alt="" /></a>
                                  </div>
                                  <div class="content-box">
                                      <div class="category">UI Kits</div>
                                      <a href="#popup-6" class="name has-popup">Chameleon UI Kit</a>
                                      <p>
                                          The freebie of the day is Chameleon, a modern UI kit perfect to...
                                      </p>
                                  </div>
                                  <div id="popup-6" class="popup-box mfp-fade mfp-hide">
                                      <div class="content">
                                          <div class="image">
                                              <img src="img/painel/work6.jpg" alt="">
                                          </div>
                                          <div class="desc">
                                              <div class="category">UI Kits</div>
                                              <h4>Chameleon UI Kit</h4>
                                              <p>
                                                  The freebie of the day is Chameleon, a modern UI kit perfect to use for creating a stylish and 
                                                  clean mobile app. This kit includes 10 screens from various categories that can be easily edited.
                                              </p>
                                              <a href="#" class="btn btn_animated"><span class="circle">View Project</span></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="clear"></div>
                      </div>
                      <!-- Section Clients -->
                      <div class="section clients" id="clients-section">
                          <div class="title">Clients</div>
                          <div class="reviews-carousel animated">
                              <div class="owl-carousel">
                                  <div class="item">
                                      <div class="content-box">
                                          <div class="reviews-item">
                                              <div class="image"><img src="img/painel/rev1.jpg" alt="" /></div>
                                              <div class="name">— Robert Chase, CEO</div>
                                              <p>
                                                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. 
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis."
                                              </p>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="item">
                                      <div class="content-box">
                                          <div class="reviews-item">
                                              <div class="image"><img src="img/painel/rev2.jpg" alt="" /></div>
                                              <div class="name">— Helen Floyd, Art Director</div>
                                              <p>
                                                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. 
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel."
                                              </p>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="item">
                                      <div class="content-box">
                                          <div class="reviews-item">
                                              <div class="image"><img src="img/painel/rev3.jpg" alt="" /></div>
                                              <div class="name">— Jhon Newton, Photographer</div>
                                              <p>
                                                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. 
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
                                                  iaculis lobortis."
                                              </p>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Section Pricing -->
                      <div class="section pricing" id="pricing-section">
                          <div class="title">Pricing</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-empty"></i></div>
                                              <div class="pt-title">Basic</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">15</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li class="disable">UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li class="disable">IOS Application <strong>New</strong></li>
                                                  <li class="disable">Android Application</li>
                                                  <li class="disable">Writing</li>
                                                  <li class="disable">Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-low"></i></div>
                                              <div class="pt-title">Start-Up</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">29</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li>UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li class="disable">IOS Application <strong>New</strong></li>
                                                  <li class="disable">Android Application</li>
                                                  <li class="disable">Writing</li>
                                                  <li class="disable">Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-half"></i></div>
                                              <div class="pt-title">Business</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">49</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li>UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li>IOS Application <strong>New</strong></li>
                                                  <li>Android Application</li>
                                                  <li class="disable">Writing</li>
                                                  <li class="disable">Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn extra btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-3">
                                  <div class="content-box animated">
                                      <div class="pricing-table">
                                          <div class="i_title">
                                              <div class="icon"><i class="icon ion ion-battery-charging"></i></div>
                                              <div class="pt-title">Enterprise</div>
                                          </div>
                                          <div class="pt-amount">
                                              <span class="dollar">$</span>
                                              <span class="amount">89</span>
                                              <span class="period">/hr</span>
                                          </div>
                                          <div class="pt-feature-list">
                                              <ul>
                                                  <li>UI/UX Design</li>
                                                  <li>Web Development</li>
                                                  <li>IOS Application <strong>New</strong></li>
                                                  <li>Android Application</li>
                                                  <li>Writing</li>
                                                  <li>Photography <strong>New</strong></li>
                                              </ul>
                                          </div>
                                          <a href="#" class="btn btn_animated"><span class="circle">Buy Now</span></a>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Blog -->
                      <div class="section blog" id="blog-section">
                          <div class="title">Blog</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="blog_item animated">
                                      <div class="image">
                                          <a href="blog-page.html"><img src="img/painel/blog1.jpg" alt="" /></a>
                                      </div>
                                      <div class="content-box">
                                          <div class="i_title">
                                              <div class="icon"><strong>27</strong> July</div>
                                          </div>
                                          <div class="category_bts">
                                              <a href="#" class="category">#branding</a>
                                              <a href="#" class="category">#ui-ux</a>
                                          </div>
                                          <a href="blog-page.html" class="name">Music Player Design</a>
                                          <p>
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                              lobortis. Vestibulum posuere molestie ipsum vel...
                                          </p>
                                          <a href="blog-page.html" class="btn btn_animated"><span class="circle">Read more</span></a>
                                      </div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="blog_item animated">
                                      <div class="image">
                                          <a href="blog-page.html"><img src="img/painel/blog2.jpg" alt="" /></a>
                                      </div>
                                      <div class="content-box">
                                          <div class="i_title">
                                              <div class="icon"><strong>27</strong> July</div>
                                          </div>
                                          <div class="category_bts">
                                              <a href="#" class="category">#branding</a>
                                              <a href="#" class="category">#ui-ux</a>
                                          </div>
                                          <a href="blog-page.html" class="name">Music Player Design</a>
                                          <p>
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
                                              lobortis. Vestibulum posuere molestie ipsum vel...
                                          </p>
                                          <a href="blog-page.html" class="btn btn_animated"><span class="circle">Read more</span></a>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="bts align-center">
                              <a href="blog.html" class="btn btn_animated"><span class="circle">View Blog</span></a>
                          </div>
                      </div>
                      <!-- Section Text -->
                      <div class="section ceo_text">
                      
                          <div class="title">Sugestões:</br></div>
                          <div class="content-box animated">
                              <div class="text-box">
                                  <p>    Caso queira nos enviar uma sugestão, 
                                      tirar uma dúvida ou reclamar de algo que o deixa insatisfeito aqui é o espaço. 
                                      Envie sua mensagem preenchendo o formulário abaixo, que vamos retornar o quanto antes. 
                                      A sua mensagem é importante para nós.
                                  </p>
                                  
                              </div>
                          </div>
                      </div>
                      <!-- Section Contacts -->
                      <div class="section contacts" id="contact-section">
                          <div class="title">Contate-me</div>
                          <div class="row">
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <div class="info-list">
                                          <ul>
                                              <li><strong><span>Endereço:</span></strong>R. Fenelon Ático Leite |40 | Rio Doce | Olinda-PE</li>
                                              <li><strong><span>Fone:</span></strong> <a href="tel:98369-6179">(81) 98369-6179</a></li>
                                              <li><strong><span>E-mail:</span></strong> <a href="barbeariaolenhador@hotmail.com">barbeariaolenhador@hotmail.com</a></li>
                                          </ul>
                                      </div>
                                      <div class="map" id="map"></div>
                                  </div>
                              </div>
                              <div class="col col-m-12 col-t-6 col-d-6">
                                  <div class="content-box animated">
                                      <h4>Escreve uma mensagem:</h4>
                                      <div class="contact-form">
                                          <form id="cform" method="post">
                                              <div class="group-val">
                                                  <input type="text" name="name" placeholder="Nome" />
                                              </div>
                                              <div class="group-val">
                                                  <input type="text" name="email" placeholder="E-mail" />
                                              </div>
                                              <div class="group-val">
                                                  <input type="text" name="subject" placeholder="Assunto" />
                                              </div>
                                              <div class="group-val ct-gr">
                                                  <textarea name="message" placeholder="Mensagem"></textarea>
                                              </div>
                                              <a href="#" class="btn btn_animated" onclick="$('#cform').submit(); return false;"><span class="circle">Enviar</span></a>
                                          </form>
                                          <div class="alert-success">
                                              <p>Obrigado, sua mensagem foi enviada com sucesso. Entraremos em contato em breve!</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- Footer -->
                  <footer>
                      <div class="copy">© 2019 | insightIDEIAS | All rights reserved.</div>
                  </footer>
                  
              </div>
          </div>
          
          <!-- jQuery Scripts -->
          <script src="js/jquery.min.js"></script>
          <script src="js/owl.carousel.min.js"></script>
          <script src="js/jquery.validate.js"></script>
          <script src="js/magnific-popup.js"></script>
          <script src="js/masonry.pkgd.js"></script>
          <script src="js/imagesloaded.pkgd.js"></script>
          <script src="js/masonry-filter.js"></script>
          <script src="js/scrollreveal.js"></script>
          <script src="js/jquery.mb.YTPlayer.js"></script>
          <script src="js/particles.js"></script>
          <!-- Google map api -->
          <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
          
          <!-- Main Scripts -->
          <script src="js/main.js"></script>
          
      </body>
      </html>
       
    • Por Bobrinha
      Olá a todos.
       
      Tenho uma dúvida e não sei se é possível caso tenha alguma sugestão por favor avise.
       
      Adicionar resultado de um innerhtml dentro de um link atributo href é possível? ou seja eu tenho um input onde seleciono um ano 
       
      <select id="ano"> <option selected>2019</option> <option value="2018">2018</option> <option value="2017">2017</option> </select> <div id="anoAtual"></div> No query pego o valor ou seja o ano selecionado e jogo no html
       
      $("select").change(function () { document.getElementById("ano").innerHTML = document.getElementById("anoAtual").value; });  
      Agora vem a dúvida como eu jogo na URL? existe uma outra forma? é possível?
       
      <a href='resultado.php&ano=COMO JOGAR O ANO AQUI?'>  
       
    • Por MoiDVAec
      Boa tarde,
       
      Agradeço desde já a ajuda! Estou precisando conecta ao banco de dados e minha classe da o seguinte erro:
       
       Já fiz varias pesquisas ja fiz varias correções mas o erro persisti. Alguem pode me ajuda a entender onde errei?
       
      Segue o código:
       
      <?php abstract class banco{ //PROPRIEDADES public $servidor = "localhost:84"; public $usuario = "root"; public $senha = ""; public $nomeBanco = "ourlady"; public $conexao = NULL; public $dataset = NULL;//resultados das pesquisas public $linhasAfetadas = -1; //METODOS public function __construct(){ $this->connecta(); }//fim construtor public function __destruct(){ if($this->conexao != NULL): mysqli_close($this->conexao); endif; }//fim destrutor public function connecta(){ $con = $this->conexao = mysqli_connect($this->servidor,$this->usuario, $this->senha) or die($this->tratarErro(__FILE__,__FUNCTION__,mysqli_errno(),errorInfo(),True)); mysqli_select_db($con,$this->nomeBanco) or die($this->tratarErro(__FILE__,__FUNCTION__,mysqli_errno(),errorInfo(),True)); mysqli_set_charset($con,'utf8'); }// fim connecta public function inserirDados($objeto){ $conec = $this->connecta(); $erro = $this->tratarErro(__FILE__,__FUNCTION__); $sqlInserir = "INSERT INTO ".$objeto->tabela." ("; //loop inseri valores dentro do comando sql para ser inserido no banoc de dados for($i=0; $i<count($objeto->valores); $i++): $sqlInserir .= key($objeto->valores); //validação para inserir a virgula no meio do loop if($i < (count($objeto->valores)-1)): $sqlInserir .= ", "; else: $sqlInserir .= ") "; endif; next($objeto->valores); endfor; reset($objeto->valores); $sqlInserir .= "VALUES ("; for($i=0; $i<count($objeto->valores); $i++): // validação tenaria para puxar o segundo valor da array $sqlInserir .= is_numeric($objeto->valores[key($objeto->valores)]) ? $objeto->valores[key($objeto->valores)] : "'".$objeto->valores[key($objeto->valores)]."'"; //validação para inserir a virgula no meio do loop if($i < (count($objeto->valores)-1)): $sqlInserir .= ", "; else: $sqlInserir .= ");"; endif; next($objeto->valores); endfor; echo $sqlInserir; $query = mysqli_query($conec, $sqlInserir); return $query or $erro; }// fim inserir daddos public function tratarErro($arquivo=NULL, $rotina=NULL, $numErro=NULL, $msgErro=NULL, $geraExcept=FALSE){ if($arquivo==NULL) $arquivo="não informado"; if($rotina==NULL) $rotina="não informado"; if($numErro==NULL) $numErro=mysqli_connect_errno($this->conexao); if($msgErro==NULL) $msgErro=mysqli_connect_error($this->conexao); $resultado = 'Ocorreu o seguinte erro:<br/> <b>Arquivo</b>'.$arquivo.'<br/> <b>Rotina</b>'.$rotina.'<br/> <b>Erro</b>'.$numErro.'<br/> <b>Mensagem</b>'.$msgErro; if($geraExcept==False): echo($resultado); else : die($resultado); endif; }// fim tratarerro }// fim da claas banco ?>  
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.